Question

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

一旦input获得课程parsley-success或parsley-error课程，我应该听取什么事件才能将字形附加到输入的父级？如果没有field:success，field-error和validate() events就不会被解雇。

我试过这个例子：

$('.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获取分配的错误类

我在我的Wordpress安装中使用Ninja Forms，你们会assign the attributes如何投入？这在NF的后端ui中是不可能的。目前我在页面加载后用Javascript添加它们，但我想知道这是否是最佳方式。

Answer 1

所以看来我缺少Javascript就是用这个问题杀了我。经过大量的尝试和调试后，我让它按照我想要的方式工作。我没有使用func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { let title = String(format: "%@/%d", categories[indexPath.row], indexPath.row) print(title) }收听，而是需要$('.form-control')来收听。所以我的功能现在如下：

window.Parsley

这完美无缺，并在成功验证字段时添加字形。

不要忘记将属性添加到字段本身，否则它不知道要验证的内容。我用javascript添加属性。在NinjaForms后端，我向//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>'); });添加了一个类（我不能从那里添加属性）。之后我使用这个类作为选择器并添加属性非常简单：

input

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

http://boriskamp.nl/contact/

http://boriskamp.nl/webdesign/

这是我的完整代码，可以让它发挥作用：

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

jQuery（document）.ready（function（$）{ ＆＃39;使用严格的＆＃39;;

//make jQuery reference to $

我希望这会帮助任何想要和我一样的人。

Answer 2

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

使用Boris的例子很棒，但是在每次成功验证后都会添加一个fa-check，如果你有多个验证器，那就不理想了。

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

最后，对于那些使用引导程序input-group-addon（最常用的是<i class="fa fa-some-icon"></i>）的人来说，添加自定义CSS类并使用find()方法进行搜索可能是个好主意否则，使用Boris的例子.reomve()引导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();
            }
        });
    });

欧芹字段验证事件监听器

2 个答案: