jQuery Validate-只允许二选一 [英] jQuery Validate - Only allow one out of two

问题描述

需要一点帮助.有了表格，我在手机和电话这两个领域都有.只需要一个.我下面的代码可以做到这一点，但是我不希望人们同时填写两者.有人可以指导我如何做吗.

Need a little help. So got a form, where I've got two fields mobile and telephone. Only one is required. My code below does that, but what I would like is I don't want people to fill in both. Can someone guide me on how to do that please.

因此，如果两个都为空，则显示所需的消息，如果一个为空，则允许发送表格，(完成)

So if both are empty show required message, if one is empty then allow to send form, (done)

如果两者都为空，则不允许发送表格并显示消息. (需要帮助)

if both are empty then don't allow to send form and show a message. (need help)

顺便说一句，我正在使用jQuery Bassistance Validator

Btw, I'm using jQuery Bassistance Validator

非常感谢.

mobile : {
    required: function(element) {  
        if ($("#telephone").val().length > 0) {
            return false;
        }
        else {
            return true;
        }
    }
},                                               
telephone: {
    required: function(element) {
        if ($("#mobile").val().length > 0) {
            return false;
        }
        else {
            return true;
        }
    }
},  
messages: {
    mobile: "Mobile is required",                        
    telephone: "Telephone is required",
},  

推荐答案

通过快速阅读文档，看来验证器的默认方法旨在在不了解其他字段的字段上进行操作.定义自己的方法可能更整洁:

From a quick read of the documentation, it looks like the validator's default methods are designed to operate on fields which have no knowledge of other fields. It might be neater to define your own:

function XOR_value_validator(value, el, args) {
    var otherValue = $(args[0]).val();
    return (value && !otherValue) || (!value && otherValue);
}

jQuery.validator.addMethod(
    'XOR_with',
    XOR_value_validator,
    jQuery.validator.format('{1}')
);

并使用类似的内容:

mobile : {
    XOR_with: [
        '#telephone', // assumed to be a jQuery selector for an element with a value()
        'Please enter either a telephone number or a mobile number.' // error message
    ]
},
telephone: {
    XOR_with: [
        '#mobile', // assumed to be a jQuery selector for an element with a value()
        'Please enter either a telephone number or a mobile number.' // error message
    ]
}

http://jqueryvalidation.org/jQuery.validator.addMethod

此产品不提供任何保修！ :P我在此文本区域中完全未经测试(从文档中)编写了该代码.

This comes with no warranty! :P I wrote it completely untested (from the docs) in this text area.

关于评论:

如果在用户填写表单时不断执行此代码，则可能会相应地启用/禁用表单元素.但是，我建议您这样做，因为您的代码的这一部分应该只真正涉及验证而不是UX.

You could probably shoehorn in functionality to enable/disable form elements accordingly, if this code is continually executed as the user fills out the form. However, I would advise against that, since this part of your code should only really be concerned with validation and not UX.

要将功能扩展到两个以上的字段(同样，未经测试)，您可以这样做:

To extend the functionality for more than two fields (again, not tested) you might do:

function one_field_allowed_validator(value, el, args) {
    var otherFields = args[0],
        valuesFound = value ? 1 : 0;

    for (var i = 0, limit = otherFields.length; i < limit; ++i) {
        var val = $(otherFields[i]).val();
        if (val && ++valuesFound === 2) {
            return false;
        }
    }
    return valuesFound !== 0;
}

jQuery.validator.addMethod(
    'Allow_one_with',
    one_field_allowed_validator,
    jQuery.validator.format('{1}')
);

用法:

mobile : {
    Allow_one_with: [
        ['#telephone', '#work'],
        'Please enter a telephone number, a mobile number or a work number.'
    ]
},
telephone: {
    Allow_one_with: [
        ['#mobile', '#work'],
        'Please enter a telephone number, a mobile number or a work number.'
    ]
},
work: {
    Allow_one_with: [
        ['#mobile', '#telephone']
        'Please enter a telephone number, a mobile number or a work number.'
    ]
}

现在感觉很hacky！对于Allow_one_with组中的每个其他字段，您必须更新所有现有的Allow_one_with验证(以包括新字段，并可能包括新的错误消息).除了 XOR ，我不愿意使用我的方法.

It's feeling pretty hacky now! With every additional field in your Allow_one_with group, you must update all existing Allow_one_with validations (to include the new field and probably a new error message). I would be reluctant to use my method for more than the XOR.

这篇关于jQuery Validate-只允许二选一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！