Question

我正在使用表单上的jQuery Validation Plugin。在我的表格上，我有一个'电话'字段和一个'手机号码'字段。

我将如何制作它以便用户必须填写其中一个，但它可以是哪个字段？

Answer 1

这看起来像您需要使用dependency-callback

这将允许您做的是：

根据给定回调的结果，使元素成为必需元素。

然后，您可以在两个电话字段上放置一个required验证规则，该规则仅根据函数回调的返回值而需要;因此，您可以在电话栏上设置规则，只有在移动字段为空时才需要此规则，反之亦然。

这是未经测试但理论上

rules: {
    telephone: {
        required: function(element) {
            return $("#mobile").is(':empty');
        }
    },
    mobile: {
        required: function(element) {
            return $("#telephone").is(':empty');
        }
    }
}

请务必查看评论/其他答案，以了解可能的最新答案。

<强>更新

rules: {
     telephone: {
          required: '#mobile:blank'
     },
     mobile: {
          required: '#telephone:blank'
     }
}

Answer 2

我认为正确的方法是使用＆＃34; require_from_group＆＃34;方法。

您可以在http://jqueryvalidation.org/require_from_group-method/

上查看

这个例子正是你要搜索的内容：

<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<input class="left phone-group" id="home_phone" name="home_phone">
<input class="left phone-group" id="work_phone" name="work_phone">

<script>
$( "#form" ).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>

必须包含additional-methods.js

Answer 3

来到这里寻找相同的答案。发现以上帖子非常有帮助。感谢。

我已扩展此解决方案以检查其他字段是否实际上有效，而不仅仅是“非空”。这可确保用户在从“移动”字段中删除“必需”类之前输入有效的电话号码，反之亦然。

Mobile: {
    required: function(element) {
    return (!$("#Phone").hasClass('valid'));
    }
},
Phone: {
    required: function(element) {
        return (!$("#Mobile").hasClass('valid'));
    }
}

Answer 4

要求是验证必须是C或（A和B）是必需的。对我有用的是：

$.validator.addMethod("multipeFieldValidator", function(value) { 
    var returnVal = false; 
    if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) {
        returnVal = true;
    }
    return returnVal; 
}, 'Either C or A and B is required');


$('#Afield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Cfield").valid();

});

$('#Bfield.form-control').change(function(){
    $(this).valid();
    $("#Afield").valid();
    $("#Cfield").valid();
});

$('#Cfield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Afield").valid();
});


within rules I have 
Afield: "multipeFieldValidator",
Bfield: "multipeFieldValidator",
Cfield: "multipeFieldValidator"

Answer 5

我遇到的麻烦是start_workers'", "/usr/share/logstash/logstash-core/lib/logstash/pipeline.rb:288:in所以这是我的工作选项示例。

在：

.is(':empty')

所有字段都是必需的。但是我想要电子邮件和/或电话来创建＆＃39;或＆＃39;：

rules: {
   name:       {required: true},
   email:      {required: true},
   phone:      {required: true}
}

您会看到我已添加rules: { name: {required: true}, email: {required: function() { //returns true if phone is empty return !$("#phone").val(); } }, phone: {required: function() { //returns true if email is empty return !$("#email").val(); } } }, messages: { email: "Email is required if no phone number is given.", phone: "A phone number is required if no phone email is given." }选项以向用户提供一些有意义的信息，因为默认消息会说每个字段都是必需的，但在这种情况下不是这样。

Answer 6

$(document).ready(function () {
    jQuery.validator.addMethod("mobile10d", function (value, element) {
        return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value);
    }, "Please enter a valid 10 digit phone number.");
    $("#form_id").validate({
        rules: {
            mobile: {
                required: "#telephone:blank",
                mobile10d: true
            },
            telephone: {
                required: "#mobile:blank",
                mobile10d: true
            }
        }
    });
});

<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 class="" action="" method="POST" id="form_id">
    <div class="col-md-4 form-group">
        <label class="form-control">Mobile<span class="required">*</span></label>
        <input class="form-control" type="text" name="mobile" id="mobile" placeholder="0-9">
    </div>
    <div class="col-md-4 form-group">
        <label class="form-control">Telephone<span class="required">*</span></label>
        <input class="form-control" type="text" name="telephone" id="telephone" placeholder="0-9">
    </div>
    <div class="form-group">
        <input type="submit" name="" value="Submit" class="apply-now-btn">
    </div>
</form>

Answer 7

这样做

const x: (arg: string) => number = identity; // implicit cast
      ~ --> Error: Type 'string' is not assignable to type 'number'.

jQuery验证 - 两个字段，只需要填写一个

7 个答案: