欧芹字段验证事件侦听器

Question

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

一旦 input 获得 class parsley-success 或 parsley-error [=，我应该听什么事件才能将字形附加到输入的父级35=]? 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>');
});

但是当 input get 分配错误 class 时什么也没有发生

我在我的 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 后端，我将 class 添加到 input （我无法从那里添加属性）。之后我使用这个 class 作为选择器并添加属性，非常简单：

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');
}

您可以在以下 url 中找到我的示例：

http://boriskamp.nl/contact/

http://boriskamp.nl/webdesign/

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

//make jQuery reference to $

jQuery(文档).ready(函数($) { 'use strict';

// 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>');
});

});

我希望这能帮助任何想和我一样完成任务的人。

Answer 2

添加到原始答案...重要的是要记住一个字段可能有多个验证器（例如 required、maxLength、custom 等）。

使用 Boris 的示例很好，但会在每次成功验证后添加一个 fa-check，如果您有多个验证器，这并不理想。

此外，如果字段被修改且验证失败，则有必要删除成功 fa-check。

最后，对于那些使用 bootstrap 的 input-group-addon 的人来说，最常用的是 <i class="fa fa-some-icon"></i>，添加自定义 CSS 可能是个好主意class 并使用 find() 方法进行搜索，否则，使用 Boris 的示例将 .reomve() bootstrap i.

jQuery(document).ready(function ($) {
        'use strict';
        // Add fa-check on success, but first remove if it exists
        window.Parsley.on('field:success', function () {
            var field = this.$element[0].id;
            if ($('#' + field).parent().find('.c-success-parsley').length) {
                $('#' + field).parent().find('.c-success-parsley').remove();
            }
            $('#' + field).parent().append('<i class="c-success-parsley fa fa-check"></i>');
        });
        // Remove fa-check on error
        window.Parsley.on('field:error', function () {
            var field = this.$element[0].id;
            if ($('#' + field).parent().find('.c-success-parsley').length) {
                $('#' + field).parent().find('.c-success-parsley').remove();
            }
        });
    });

欧芹字段验证事件侦听器

Parsley field validation event listener

javascript

jquery

parsley.js