Question

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

小提琴： 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()，但它不起作用。

所以我的问题是：如何为用户点击的表单实现这一目标＆＃34;不需要＆＃34;它的验证被取消激活，所有错误消息和样式都会消失？

Answer 1

要执行此操作，您需要添加条件以检查用户是否选中了不需要复选框。

我已相应地编辑了jsfiddle here

喜欢以下条件

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

Answer 2

我保留你的代码并尝试查看是否选中了复选框，它会将属性 formNoValidate 写入输入字段 - 我在.validate docs中找到了这个...但是它不像我想的那样工作

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中看到了这个prop的不同样式）

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（）不会查找此prop ...为什么？

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>

JS：

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

jQuery验证：点击

3 个答案: