jQuery验证:单击禁用验证

Question

在一个网页上，我有两个用jQuery验证的表单。用户可以决定是否需要填写表格。如果他决定他不需要它，我希望验证被停用。

Fiddle：https://jsfiddle.net/eLrxj3gh/8/

我的密码来了：

HTML:

  <form class="simple-form" action="" method="post">   
      <input type="checkbox" id="mark-as-not-needed-1" class="mark-as-not-needed"><label for="mark-as-not-needed-1">not needed</label>

      <div class="form-errors"></div>   

      <input name="field1" type="text"></input>   
      <input name="field2" type="text"></input>   

      <input type="submit" value="submit form #1"></input>   
  </form>   

  <form class="simple-form" action="" method="post">   
      <input type="checkbox" id="mark-as-not-needed-1" class="mark-as-not-needed"><label for="mark-as-not-needed-1">not needed</label>

      <div class="form-errors"></div>   

      <input name="field1" type="text"></input>   
      <input name="field2" type="text"></input>   

      <input type="submit" value="submit form #2"></input>   
  </form>   

JS:

          $('.simple-form').each(function () {   
              var $currentForm = $(this);   
              $currentForm.validate(   
                      {   
                          debug: true,   
                          rules: {   
                              field1: {   
                                  required: true   
                              },   
                              field2: {   
                                  required: true   
                              }   
                          },   
                          submitHandler: function (form) {   
                              $(form).find('.form-errors').empty();   

                              alert('submitted');   
                          },   
                          showErrors: function (errorMap, errorList) {   
                              var msgerror = "Fill out all fields of this form.";   
                              var divErrors = $currentForm.find('.form-errors');   
                              if (this.numberOfInvalids() > 0) {   
                                  divErrors.empty().html(msgerror).show();   
                              } else {   
                                  divErrors.hide();   
                              }   
                              this.defaultShowErrors();   
                          },   
                          errorPlacement: function (error, element) {   
                              return false;   
                          },   
                          errorClass: "form-invalid"   
                      }   
              );   
          });   

          $('.simple-form').each(function () {   
              if (!($(this).valid())) {   
                  console.log('Page load: one form is NOT valid');   
              }   
          });   

我已经按照另一篇文章中的建议尝试使用$('.simple-form')[0].submit()，但它不起作用。

因此，我的问题是:对于一个用户单击“不需要”的表单，它的验证会被停用，并且该表单的所有错误消息和样式都消失了，我该如何做到这一点？

Answer 1

要做到这一点，您必须添加一个条件来检查用户是否选中了不需要复选框。

我已经编辑了相应的这里

类似于以下条件

 if($currentForm.find(".mark-as-not-needed").prop('checked') != true)

Answer 2

我保留您的代码原样，并试图查看是否选中了复选框，它将把属性formNoValidate写入输入字段-我在.validate文档中找到了这一点.但这不像我想的那样有效

https://jsfiddle.net/eLrxj3gh/11/

根据复选框的状态调用函数

$('.mark-as-not-needed').on('click', function(){
 if(this.checked === true) {
        deactivate_validation(this.id);
    }
    else {
        activate_validation(this.id);
    }

});

寻找正确的表单，搜索输入的type=text元素并向每个元素添加一个属性(我在console.log中看到了这个道具的不同样式)

function deactivate_validation(el) {
    $checkbox = $('#'+el);
    $inputs = $checkbox.parent().find('input:text');
    $inputs.each(function(){
        $(this).prop("formNoValidate", true);
        $(this).prop("formnovalidate", true);
        console.log($(this));
    });
}

function activate_validation(el) {
    $checkbox = $('#'+el);
    $inputs = $checkbox.parent().find('input:text');
    $inputs.each(function(){
        $(this).prop("formNoValidate", false);
        $(this).prop("formnovalidate", false);
        console.log($(this));
    });
}

在console.log中，我看到属性被正确地写入了输入字段.但是.validate()不会找这个道具.为什么？

Answer 3

尝尝这个,

HTML：

          <form class="simple-form" action="" method="post">   

                 <input type="checkbox" id="mark-as-not-needed-1" name="mark-as-not-needed-1" class="mark-as-not-needed"><label for="mark-as-not-needed-1">not needed</label>


          <div class="form-errors"></div>   

          <input id="field1" name="field1" type="text"></input>   
          <input id="field2" name="field2" type="text"></input>   

          <input type="submit" value="submit form #1"></input>   
      </form>   

      <br>
      <br>
      <form class="simple-form" action="" method="post">   
          <input type="checkbox" id="mark-as-not-needed-2" name="mark-as-not-needed-2" class="mark-as-not-needed"><label for="mark-as-not-needed-1">not needed</label>

          <div class="form-errors"></div>   

          <input id="field1" name="field1" type="text"></input>   
          <input id="field2" name="field2" type="text"></input>   

          <input type="submit" value="submit form #2"></input>   

      </form>   

联署材料：

$('.simple-form').on("change", "input[type='checkbox']", 
  var divErrors = $(this).parent().find('.form-errors');
  if(this.checked) {
     removeRules(checkrule);
     divErrors.hide();    
     $(this).parent().find("input[type='text']").removeAttr('class');
  } else {
     addRules(checkrule);
     divErrors.show();  
     $(this).parent().find("input[type='text']").attr('class','form-invalid');
  }
 });

var checkrule = {
 field1: {   
         required: true   
         },   
 field2: {   
         required: true   
         }   
 };

function addRules(
  for (var item in rulesObj){
   $('#'+item).rules('add',rulesObj[item]); 
  } 
}

function removeRules(
  for (var item in rulesObj){
    $('#'+item).rules('remove');
  } 
}

$('.simple-form').each(function () {   
              var $currentForm = $(this);   
              $currentForm.validate(   
                      {   
                          debug: true,   
                          rules: checkrule,   
                          submitHandler: function (form) {   
                              $(form).find('.form-errors').empty();   

                              alert('submitted');   
                          },   
                          showErrors: function (errorMap, errorList) {   
                              var msgerror = "Fill out all fields of this    form.";   
                              var divErrors = $currentForm.find('.form-errors');   
                              if (this.numberOfInvalids() > 0) {   
                                  divErrors.empty().html(msgerror).show();   
                              } else {   
                                  divErrors.hide();   
                              }   
                              this.defaultShowErrors();   
                          },   
                          errorPlacement: function (error, element) {   
                              return false;   
                          },   
                          errorClass: "form-invalid"   
                      }   
              );   
          });   

          $('.simple-form').each(function () {   
              if (!($(this).valid())) {   
                  console.log('Page load: one form is NOT valid');   
              }   
          });   

http://codepen.io/anon/pen/oXwaEj