jQuery Validate：验证一个字段，或者一对的两个字段都是必需的

Question

我有一个要验证的表单，它有两个字段：

<div class="entryForm">
    <div class="formField">
        <label for="fieldEmailAddress">Email address:</label>
        <input type="email" name="fieldEmailAddress" id="fieldEmailAddress"/>
    </div>
    <div class="formField">
        <label for="fieldMobileNumber">Mobile number:</label>
        <input type="text" name="fieldMobileNumber" id="fieldMobileNumber"/>
    </div>
</div>

这是我的 jQuery 验证接线：

<script type="text/javascript">
    $(document).ready(function () {
        $('#form1').validate({ rules: { fieldMobileNumber: { phoneUS: true } } });
    });
</script>

我想做的是添加一个额外的验证规则：如果 fieldEmailAddress 和 fieldMobileNumber 都为空，则表单无效。换句话说，我想让它至少需要 fieldEmailAddress 或 fieldMobileNumber 之一。似乎大多数 jQuery Validation 自定义方法都设计为一次仅适用于一个字段 - 我需要同时验证两者。

有什么想法吗？

Answer 1

您可以绕过验证插件并进行如下检查：

$("#form1").submit(function() {
    var email = $('#fieldEmailAddress');
    var phone = $('#fieldMobileNumber');

    if(email.val() == '' && phone.val() == '') {
        alert('Fill out both fields');
    }
    else if(email.val() == '') {
        alert('Email, please...');
    }
    else if(phone.val() == '') {
        alert('Phone, please...');      
    }
    else {
        alert('Yay!');
    }   
});

Answer 2

您只需要包含the additional-methods.js file 并使用require_from_group 方法。

require_from_group: [x, '.class']

// x = number of items required from a group of items.

// .class = class assigned to every form element included in the group.

jQuery：

$(document).ready(function () {

    $('#form1').validate({
        rules: {
            fieldMobileNumber: {
                phoneUS: true,
                require_from_group: [1, '.mygroup']
            },
            fieldEmailAddress: {
                require_from_group: [1, '.mygroup']
            }
        },
        groups: {
            theGroup: 'fieldMobileNumber fieldEmailAddress'
        }
    });

});

将class="mygroup" 添加到您需要组合在一起的每个输入...

<input type="email" name="fieldEmailAddress" id="fieldEmailAddress" class="mygroup" />

最后，可选择使用groups 选项将消息集中到一个...

groups: {
    theGroup: 'fieldMobileNumber fieldEmailAddress'
}

工作演示：http://jsfiddle.net/CYZZy/

如果您不喜欢验证消息的放置位置，可以使用errorPlacement 回调函数对其进行调整。