jQuery验证插件，当表单有效时启用提交按钮

我的表单上的提交按钮有一个启用和禁用状态。jQuery验证插件，当表单有效时启用提交按钮

的条件如下：

如果所有输入字段已输入并有效启用提交按钮。

如果某些字段没有被输入，请不要启用提交按钮。

到目前为止，验证正在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

来源

2014-11-20 Filth

重复此：http://stackoverflow.com/a/21956309/594235 – Sparky 2014-11-20 21:50:23

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

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

DEMO：http://jsfiddle.net/sd88wucL/

相反，你也可以使用都事件来触发相同的处理函数...

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

DEMO 2：http://jsfiddle.net/sd88wucL/1/

来源：https://stackoverflow.com/a/21956309/594235

来源

2014-11-20 21:46:51 Sparky

谢谢Sparky。 – Filth 2014-11-20 22:02:50

Sparky，尽管这很棒 - 这种验证会在您从一个输入中“模糊”时触发页面上的所有表单域。您是否可以在每次输入时验证？ – Filth 2014-11-25 22:05:09

@Filth，是和不是。是的，你可以附上'。有效（）'到'onfocusout'处理程序中的各个字段。然而，为了激活你的'submit'按钮，你不能调用'.valid（）'来返回一个布尔值而不会调用错误消息......'.valid（）'同时执行两个操作。没有提供可以告诉你表单是否有效的方法，而不必在表单上激活验证。 – Sparky 2014-11-25 22:11:05

$('form').find(':input').each(function(index, value){ 
    //action for every element 
    $(value); 
});

在这种情况下，你可以这样做这样:(但我不喜欢这个解决方案）

var areSomeFieldsEmpty = false; 
$('form').find(':input').each(function(i, v){ 
    if ($(v).val().length <= 0){ 
    areSomeFieldsEmpty = true; 
    } 
}); 

if (!areSomeFieldsEmpty){ 
    //unlock form 
}

http://jsfiddle.net/89y26/335/

来源

2014-11-20 20:49:10 Foxbond

这只适用于一个输入 - 不是全部。 – Filth 2014-11-20 20:53:49

你做错了:)我添加了完整的解决方案 – Foxbond 2014-11-20 21:02:25

下面的代码是什么，我结束了迄今：

$('#formId').on('blur keyup change', 'input', function(event) { 
    validateForm('#formId'); 
}); 

function validateForm(id) { 
    var valid = $(id).validate().checkForm(); 
    if (valid) { 
     $('.form-save').prop('disabled', false); 
     $('.form-save').removeClass('isDisabled'); 
    } else { 
     $('.form-save').prop('disabled', 'disabled'); 
     $('.form-save').addClass('isDisabled'); 
    } 
} 

// Run once, so subsequent input will be show error message upon validation 
validateForm('#formId');

它采用checkForm()代替form()和我的禁用按钮具有类form-save

它基于@Sparky's answer

有一个issue filed on the jquery-validation git repo。

来源

2017-08-28 09:37:01

jQuery验证插件，当表单有效时启用提交按钮

回答

相关问题