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

            }

在此处查看 DEMO

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