javascript - 欧芹字段验证事件监听器

Question

我目前正在尝试 Parsley.js，如果你问我的话，它效果很好，但我有几个问题:

1. 我应该监听什么事件，以便在输入获取类parsley-success或parsley-后立即将字形附加到输入的父级错误类？ field:success 和 field-error events没有 validate() 就不会被解雇。

我尝试过这个例子:

$('.form-control').on('field:success', function () {
    if ($(this).parent().find('i').length) { //remove favicon if one's present
        $(this).parent().find('i').remove();
    }
    $(this).parent().append('<i class="fa fa-check-circle fa-lg fa-fw"></i>');
});

但是当输入获取分配的错误类时什么也不会发生

我正在我的 Wordpress 安装中使用 Ninja Forms，你们觉得怎么样 assign the attributes到输入？这在 NF 后端的 ui 中是不可能的。目前，我在页面加载后使用 Javascript 添加它们，但我想知道这是否是最好的方法。

Answer 1

看来我缺乏 Javascript，这个问题让我丧命。经过大量的尝试和调试，我让它完全按照我想要的方式工作。 我不需要使用 $('.form-control') 来监听，而是需要 window.Parsley 来监听。所以我现在的功能如下:

//field success
window.Parsley.on('field:success', function() {
    var field = this.$element[0].id;
    // This global callback will be called for any field that fails validation.
    console.log('Validation succeeded for: ', field);
    $('#' + field).parent().append('<i class="fa fa-check-circle fa-lg fa-fw"></i>');
});

这可以完美地工作，并在成功验证字段时添加字形。

不要忘记将属性添加到字段本身，否则它不知道要验证什么。 我用 javascript 添加属性。在 NinjaForms 后端中，我向 input 添加一个类(我无法从那里添加属性)。之后我使用这个类作为选择器并添加属性，非常简单:

var textonly = $('input.ninja-forms-field.text-only-input');//the class is 'text-only-input'
if( textonly.length ) {
    textonly.attr('data-parsley-trigger','focusout');
    textonly.attr('data-parsley-trigger-after-failure','keyup');
    textonly.attr('data-parsley-pattern', '^[a-z A-Z]+$');
    textonly.attr('data-parsley-pattern-message', 'Dit veld mag alleen maar letters en spaties bevatten. Minimaal 2 letters');
    textonly.attr('minlength','2');
}

您可以在以下网址找到我的示例:

http://boriskamp.nl/contact/

http://boriskamp.nl/webdesign/

这是我让它工作的完整代码:

//make jQuery reference to $

jQuery(文档).ready(函数($) { '使用严格';

// change input types:

var checkbox = $('#ninja_forms_field_15_options_span input.ninja-forms-field.checkbox-input');
if( checkbox.length ) {
    checkbox.attr('data-parsley-trigger','click');
    checkbox.attr('data-parsley-trigger-after-failure','click');
    checkbox.attr('data-parsley-multiple','betreft');
    checkbox.attr('data-parsley-mincheck','1');
}
var textonly = $('input.ninja-forms-field.text-only-input');
if( textonly.length ) {
    textonly.attr('data-parsley-trigger','focusout');
    textonly.attr('data-parsley-trigger-after-failure','keyup');
    textonly.attr('data-parsley-pattern', '^[a-z A-Z]+$');
    textonly.attr('data-parsley-pattern-message', 'Dit veld mag alleen maar letters en spaties bevatten. Minimaal 2 letters');
    textonly.attr('minlength','2');
}
var email = $('input.ninja-forms-field.email-input');
if( email.length ) {
    email.get(0).type = 'email';
    email.attr('required','');
    email.attr('data-parsley-trigger','focusout');
    email.attr('data-parsley-trigger-after-failure','keyup');
}
var tel = $('input.ninja-forms-field.telefoon-input');
if( tel.length ) {
    tel.get(0).type = 'tel';
    tel.attr('data-parsley-trigger','focusout');
    tel.attr('data-parsley-trigger-after-failure','keyup');
    tel.attr('data-parsley-type','digits');
}
var bericht = $('textarea.ninja-forms-field.bericht-input');
if( bericht.length ) {
    bericht.attr('required','');
    bericht.attr('data-parsley-trigger','focusout');
    bericht.attr('data-parsley-trigger-after-failure','keyup');
    bericht.attr('minlength','15');
}

//PARSLEY VALIDATION
$('form').parsley();

//field start validation
window.Parsley.on('field:validate', function() {
    var field = this.$element[0].id;
    $('#' + field).parent().find('i').remove(); //remove glyph
});
//field error
window.Parsley.on('field:error', function() {
    var field = this.$element[0].id;
    // This global callback will be called for any field that fails validation.
    console.log('Validation failed for: ', field);
    $('#' + field).parent().append('<i class="fa fa-exclamation-circle fa-lg fa-fw"></i>');
});
//field success
window.Parsley.on('field:success', function() {
    var field = this.$element[0].id;
    // This global callback will be called for any field that fails validation.
    console.log('Validation succeeded for: ', field);
    $('#' + field).parent().append('<i class="fa fa-check-circle fa-lg fa-fw"></i>');
});

});

我希望这能帮助任何想要实现与我相同目标的人。