jquery - Jquery验证依赖字段

Question

我有 4 个字段，用户应该在其中至少一个中输入值。因此，我试图验证这 4 个字段中的每一个都将在它们全部为空时都需要，否则将不需要。

该规则似乎适用于我选择首先尝试的一个字段，但即使我提供了一个值，所需的错误仍然存​​在。

这是我的代码：

$("#ProspectDtlFrm").validate({
  rules: { 
    prsptEmail: {
      required: function(element) {
        return (
          $("#prsptHomePhone").val() == '' &&
          $("#prsptBusinessPhone").val() == '' &&
          $("#prsptMobilePhone").val() ==''
        ) 
      }                                         
    }    
  },
  messages: {
    prsptEmail: "Please enter your first name"
  }
}); 

Answer 1

你可以使用depends：

$('#ProspectDtlFrm').validate({ 
    rules: {
        prsptEmail: {
            required: {
                depends: function(element) {
                    return ($('#prsptHomePhone').val() == '' && 
                            $('#prsptBusinessPhone').val() == '' && 
                            $('#prsptMobilePhone').val() == '');
                }
            }
        }    
    }, 
    messages: { 
        prsptEmail: 'Please enter your first name'
    } 
});

Answer 2

该depends子句仍受支持。这是来自 1.11.0pre 版本：

normalizeRules: function(rules, element) {
  // handle dependency check
  $.each(rules, function(prop, val) {
    // ignore rule when param is explicitly false, eg. required:false
    if (val === false) {
      delete rules[prop];
      return;
    }
    if (val.param || val.depends) {
      var keepRule = true;
      switch (typeof val.depends) {
        case "string":
          keepRule = !!$(val.depends, element.form).length;
          break;
        case "function":
          keepRule = val.depends.call(element, element);
          break;
      }
      if (keepRule) {
        rules[prop] = val.param !== undefined ? val.param : true;
      } else {
        delete rules[prop];
      }
    }
  });

如您所见，您可以在“字符串”和“函数”之间进行选择。所以你可以使用：

rules: {
  input_name_here: {
    required: {
      depends: function(element) {
        return $("#thickBoxId:checked").length;
        //or whatever you need to check
      }
    }
  }
}

或者

rules:{
  input_name_here:{
    required: '#tickBoxId:checked'
  }
}

如果你只需要测试是否存在被检查的东西。

Answer 3

'depends' 似乎不再受支持，而且他们的文档不是最新的。

因此，在选中“是”复选框的情况下，验证另一个字段：

rules:{
    'name value of area you want to validate':{
        required: '#tickBoxId:checked'
    }
}

Answer 4

方法是depends它的作品。

    rules: {
        prsptEmail: {
            required: {
                depends: function(element){
                    if ($('#id-user').val() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
    },
    messages: {
        prsptEmail : {
            required : "please signIn!",
        }
    },

Answer 5

这个场景有一个特性：require_from_group方法。

https://jqueryvalidation.org/require_from_group-method

描述：确保组中给定数量的字段是完整的。

在传递给规则的选项中，提供组内必须完整的最少字段数以及定义组的选择器。然后将此规则应用于组内的所有字段。然后在至少完成最小数量之前无法提交表格。

附加方法.js 文件的一部分

我将文档中的示例复制到此代码段：

$("#myform").validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<form id="myform">
  <label for="mobile_phone">Mobile phone: </label>
  <input class="phone-group" id="mobile_phone" name="mobile_phone">
  <br/>
  <label for="home_phone">Home phone: </label>
  <input class="phone-group" id="home_phone" name="home_phone">
  <br/>
  <label for="work_phone">Work phone: </label>
  <input class="phone-group" id="work_phone" name="work_phone">
</form>