jQuery 表单验证问题答案

【问题标题】：jQuery Form Validate IssuejQuery 表单验证问题
【发布时间】：2017-08-29 01:57:32
【问题描述】：

我正在使用 jQuery validate 验证表单。表单有 3 个字段。 1 个文本区域、1 个复选框和 1 个输入类型文本。我想动态验证表单，即当用户在输入类型文本中输入了一些值时，不需要复选框和文本区域，但如果用户没有在其中输入值，则两者都是必需的。下面的代码我试过：

$("#form").validate({
   rules: {
     inputTypeText: {required: true},
     inputTypeCheckbox: {required: false},
     textarea: {required: false},
   },
   messages: {
     inputTypeText: "This field is required",
     inputTypeCheckbox: "This field is required",
     textarea: "This field is required",
   },
   submitHandler: function(form) {
        form.submit();
   }
});
$('#inputTypeText').keyup(function(){
   if($(this).val()==''){
     $('input[name="inputTypeText"]').rules('add',{required: false});
     $('textarea[name="inputTypeCheckbox"]').rules('add',{required: true});
     $('input[name="textarea"]').rules('add',{required: true});
   }else{
     $('input[name="inputTypeText"]').rules('add',{required: true});
     $('input[name="inputTypeCheckbox"]').rules('add',{required: false});
     $('textarea[name="textarea"]').rules('add',{required: false});
   }
});

如下图所示报错。

请帮助我。先感谢您。

【问题讨论】：

如何在这条规则中获取其他表单元素值？请解释一下。

标签： jquery html forms validation

【解决方案1】：

在 jQuery 验证中使用“依赖”。

$("#form").validate({
rules: {
inputTypeCheckbox: {
  required: {
    depends: function(element) {
      return $('#input-field').val().length == 0
    }
  }
},
textarea: {
  required: {
    depends: function(element) {
      return $('#input-field').val().length == 0
    }
  }
},
}, 
messages: {
inputTypeCheckbox: "This field is required",
textarea: "This field is required"
 }
});

参考这个fiddle：

【讨论】：