Parsley.js - 当我第一次输入必填密码字段时未捕获，然后它就可以工作了

Question

我正在使用 Parsley.js。

我的表单上有两个字段。我想检查两者是否有效，然后使用侦听器从提交按钮中删除“已禁用”。

当我将电子邮件字段填写为有效，然后在密码字段中输入文本时，在我输入时它在 Chrome 中显示为“未捕获”，在 Firefox 中显示为“递归过多”。

如果我退格并删除密码字段中的所有文本并再次开始输入，它会按计划工作并将表单识别为有效。我只是想知道我第一次输入文本时会发生什么，有人能注意到问题吗？！

我的 HTML：

<form class="custom">
        <fieldset>
            <div class="default">
                <label for="member_id">Email address</label>
                <input id="member_id" type="email" value="" placeholder="Enter value" required/>
            </div>
            <div class="default">
                <label for="password">Password</label>
                <input id="password" type="password" value="" placeholder="Your password" required/>
            </div>
            <input class="disabled" disabled="disabled" type="submit" value="Login">                
        </fieldset>     
    </form>

还有我的 JQUERY：

var $form = $('#login form');
var $submit = $form.find(':submit');    

$form.parsley({     
    namespace: 'data-parsley-',
    trigger: 'keyup',
    successClass: 'success', 
    errorClass: 'error',        
    errors: {
        errorsWrapper: '<span class="help-inline"></span>',
        errorElem: '<span style="display:block;"></span>',                        
        classHandler: function ( elem, isRadioOrCheckbox ) {
            return $( elem ).parent();
        }
    },
    listeners: {
        onFieldSuccess: function () {
            if ($form.parsley('isValid')) {                    
                console.log('form is valid');  
                $submit.removeClass('disabled').removeAttr('disabled');                                             
                return false;     
            }
        },
        onFieldError: function () {
            $submit.attr('disabled', 'disabled');
            $submit.addClass('disabled');
            return false; 
        }                     
    }  
});

感谢您的帮助！

Answer 1

我认为您不应该在onFieldSuccess 中调用parsley('isValid')，因为它可能会触发对所有字段的重新验证，从而使您陷入循环。

试试这个：

    onFieldSuccess: function () {
        console.log('checking...');
        if ($('#password').parent().hasClass('success') && $('#member_id').parent().hasClass('success')) {
            console.log('success');
            $submit.removeClass('disabled').removeAttr('disabled');                                            
        }
        return true;  
    }

不完美，但表示解决方案。 我把它放在小提琴里供你检查（和实验）：http://jsfiddle.net/BZ38k/2/

请注意，我必须检查父级 DIV 的班级 - 我不确定具体原因。