jQuery验证：验证一个字段或一对字段中的两个字段是否都必需

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 Validation联播：

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

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

有任何想法吗？

Answer 1

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

$("#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

您只需要包括additional-methods.js文件并使用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回调函数对其进行调整。