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

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

Answer 2

$('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/

Answer 3

以下代码是我到目前为止所得到的：

$('#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。

Answer 4

v-model

最初，我将“提交”按钮设置为禁用，对于输入标签中的每次更改，我都会调用一个函数来使用jquery验证表单

ID   |Name     |Balance     |Type   |ProductName
1     Abdol     10000        1       RAID100
2     HIVE      5000000      2       RAID100
3     Ade       20000        1       RAID200
4     Koi       30000        1       RAID100

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

4 个答案: