jQuery 验证插件需要一个字段，但不是两个

Question

我有一个正在使用 jQuery 验证插件验证的表单，我只想填写一个字段，而另一个字段的值为 0（零）。但是，必须强制填写其中一项。

这是我的实际形式：

这是我的表格HTML:

 <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label> <span>Amount to Player</span></label>
                    <input name="AmountToHorse" type="text" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label> <span>Amount to Stable</span></label>
                    <input name="AmountToStable" type="text" class="form-control">
                </div>
            </div>
        </div>

这是我的验证：

$('#reloadForm').validate({
                        rules: {

                            AmountToHorse: {
                                required: true,
                                number: true
                            },
                            AmountToStable: {
                                required: true,
                                number: true
                            },
                        }
                    });

关于如何做到这一点的任何线索？

Answer 1

您需要使用 the .addMethod() method 编写自定义规则以确保只填写一个。

相应调整...

$(document).ready(function () {

    $.validator.addMethod('onlyOne', function(value, element, param) {
        return this.optional(element) || $('[name="' + param[0] + '"]').is(':blank');
    }, "Please fill out only one of these fields");

    $('#myform').validate({
        rules: {
            foo: {
                onlyOne: ["bar"],
                number: true
            },
            bar: {
                onlyOne: ["foo"],
                number: true
            }
        }
    });

});

然后使用 blur keyup 处理程序来确保验证消息在所有字段上自行更新。同样，由于我不知道您在此表单上是否有其他字段，请调整这些选择器以仅针对相关和需要的内容。

$('input').on('blur keyup', function() {
    $('#myform').valid();  // force validation on entire form
});

概念验证演示：http://jsfiddle.net/e01d5sw7/

编辑:

根据 OP 的评论，虽然不应同时填写两个字段，其中一个字段是 required...

$.validator.addMethod('onlyOne', function(value, element, param) {
    return ($(element).is(':filled') && $('[name="' + param[0] + '"]').is(':blank')) ||
    (($('[name="' + param[0] + '"]').is(':filled')) && $(element).is(':blank'));
}, "Please fill out only one of these fields");

演示 #2：http://jsfiddle.net/Lnxxgs92/

jQuery 验证插件需要一个字段，但不是两个

jQuery Validate plugin one field required, but not both

jquery

jquery-validate