jQuery Validate插件,在表单有效时启用提交按钮

Question

我的表单上的提交按钮有启用和禁用状态.

条件如下:

如果已输入所有输入字段且有效,则启用提交按钮.

如果尚未输入某些字段,请不要启用提交按钮.

到目前为止,验证是在onkeyup事件中完成的,并且仅适用于第一个输入:

//Custom onkeyup validation
            onkeyup: function(element) {
                //Check if input is empty remove valid class from parent
                var formInput = $(element),
                    formInputParent = $(element).parent('fieldset');
                if(formInputParent.hasClass('form--valid') && formInput.val() === "") {
                    formInputParent.removeClass('form--valid');
                }

                //Check if all fields are not empty to remove submit--disabled class
                var formInputs = $('form').find(':input');
                console.log(formInputs);

                formInputs.each(function(){
                    if(formInputs.length > 0) {
                        formInputs.parents('form').find('.submit-form').removeClass('submit--disabled');
                    } 
                });

            }

点击这里查看演示

Answer 1

您只需构造一个blur(甚至是一个keyup)处理函数来根据表单的有效性切换按钮.使用插件的.valid()方法来测试表单.

$('input').on('blur', function() {
    if ($("#myform").valid()) {
        $('#submit').prop('disabled', false);  
    } else {
        $('#submit').prop('disabled', 'disabled');
    }
});

演示:http: //jsfiddle.net/sd88wucL/

相反,您也可以使用这两个事件来触发相同的处理函数...

$('input').on('blur keyup', function() {
    if ($("#myform").valid()) {
        $('#submit').prop('disabled', false);  
    } else {
        $('#submit').prop('disabled', 'disabled');
    }
});

演示2:http://jsfiddle.net/sd88wucL/1/

资料来源:https: //stackoverflow.com/a/21956309/594235