jQuery Validate:验证是否需要一个字段或两个字段

时间:2013-09-24 22:17:56

标签: javascript jquery jquery-validate

我有一个表单,我试图验证它有两个字段:

<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自定义方法被设计为一次只能用于一个字段 - 我需要验证两者。

有什么想法吗?

2 个答案:

答案 0 :(得分:2)

您可以绕过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!');
    }   
});

答案 1 :(得分:1)

您只需要包含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回调函数对其进行调整。