jQuery验证插件需要一个字段，但不能同时

Question

我有一个用jQuery Validate插件验证的表单，我希望只填写一个字段，而另一个字段的值为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
});

概念证明DEMO：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");

DEMO＃2：http://jsfiddle.net/Lnxxgs92/