javascript - 必需 ="required"输入字段以另一个输入字段为条件

Question

我有一个带有 2 个输入字段的 from:手机和电话。我希望至少需要其中一个字段，以便可以提交表单。要么您输入手机号码，不再需要电话输入，要么反之亦然。

 <input class="form-control telephone" type="text" placeholder="Telephone" required="required" maxlength="100" pattern="^\+?[0-9 /-]*$"/>

<input class="form-control cellphone" type="text" placeholder="Cellphone" required="required" maxlength="100" pattern="^\+?[0-9 /-]*$"/>

我发现 Jquery 验证器有条件语句，但我不知道如何使用它们，或者它们在我的代码中不起作用。这就是我所拥有的

$("#myForm").validate({
firstInput: {
    required: function(element){
        return $(".cellphone").val().length > 0;
    }
},
secondInput: {
    required: function(element){
        return $(".telephone").val().length > 0;
    }
}
});

Answer 1

1)您需要将验证规则放入规则对象中。

2) 你的 if 语句是错误的。如果另一个输入为空 (otherInput.val().length == 0)，则需要输入 (required: true)。

3) 您需要为输入指定名称属性。

$("#myForm").validate({
  rules: {
    firstInput: {
        required: function(element){
            return $(".cellphone").val().length == 0;
        }
    },
    secondInput: {
        required: function(element){
            return $(".telephone").val().length == 0;
        }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id='myForm'>
  <input class="form-control telephone" type="text" placeholder="Telephone" maxlength="100" name="firstInput" pattern="^\+?[0-9 /-]*$"/>
  <input class="form-control cellphone" type="text" placeholder="Cellphone" name="secondInput" maxlength="100" pattern="^\+?[0-9 /-]*$"/>
  <input type="submit">
</form>