3

需要一点帮助。所以得到了一个表格，其中我有两个字段移动和电话。只有一个是必需的。我下面的代码就是这样做的，但我想要的是我不希望人们同时填写两者。有人可以指导我如何做到这一点。

因此，如果两者都是空的，则显示所需的消息，如果一个为空，则允许发送表单，（完成）

如果两者都是空的，则不允许发送表单并显示消息。（需要帮忙）

顺便说一句，我正在使用 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",
},
4

4 回答 4

4

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

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

这没有保修！:PI 在此文本区域中完全未经测试（来自文档）编写它。

编辑：

关于评论：

如果在用户填写表单时不断执行此代码，您可能会相应地启用/禁用表单元素的功能。但是，我建议不要这样做，因为您的这部分代码应该只关心验证而不是用户体验。

要扩展两个以上字段的功能（同样，未经测试），您可以这样做：

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之外。

于 2013-06-12T09:39:35.960 回答
0

您可以保留一个包含已验证项目数量的变量：

validatedItems : 0,

mobile : {
    var self = this;
    required: function(element) {  
        if ($("#telephone").val().length > 0) {
            self.validatedItems--;
            return false;
        }
        else {
        self.validatedItems++;
            return true;
        }
    }
},                                               
telephone: {
    var self = this;
    required: function(element) {
        if ($("#mobile").val().length > 0) {
            self.validatedItems--;
             return false;
         }
         else {
            self.validatedItems++;
            return true;
        }
    }
},

然后您可以检查发送表单时是否验证了一项或多项：

if( validatedItems > 0 ) {
    sendForm();
}
于 2013-06-12T09:34:49.927 回答
0

将 required 方法与依赖关系（jquery 选择器）一起使用，这种情况下使用 :blank 伪选择器，它是 validate 插件的一部分

$(form).validate({
   rules
   {
     mobile:{required: '#telephone:blank'}
     telephone:{required: '#mobile:blank'}
   }
});

来自 docs - '很多时候，您的表达式会使用选择器过滤器，例如 #foo:checked、#foo:filled、#foo:visible。这个插件为此目的提供了自定义选择器。'

编辑

对不起，我没有完全阅读这个问题。最接近您需要的方法是在 jQuery validate 的 additional-methods.js 文件中找到的 require_from_group 方法。您需要进行非常小的调整来测试您组中的一个经过验证的字段。

例如

<form>
    <input class="productinfo" name="partnumber" />
     <input class="productinfo" name="description" />
     <input type="submit" />
</form>

带代码

jQuery.validator.addMethod("require_from_group_exact", function(value, element, options) {
    var validator = this;
    var selector = options[1];
    var validOrNot = $(selector, element.form).filter(function() {
        return validator.elementValue   (this);
    }).length == options[0];

    if(!$(element).data('being_validated')) {
        var fields = $(selector, element.form);
        fields.data('being_validated', true);
        fields.valid();
        fields.data('being_validated', false);
    }
    return validOrNot;
}, jQuery.format("Please fill {0} of these fields."));

$('form').validate({
    rules:{
    partnumber:  {require_from_group_exact: [1,".productinfo"]},
    description: {require_from_group_exact: [1,".productinfo"]}
    }
 });

如果您将其与 addtional-methods.js 中的原始方法进行比较，您会发现它几乎相同。

希望这会有所帮助 - 您需要用“电话”和“手机”替换零件编号和描述，并且应该设置好。

在这里摆弄

于 2013-06-12T12:28:53.483 回答
0

此解决方案使用来自验证插件的标准功能。我使用了 require_from_group 规则来确保至少一个被填充，然后我使用 maxlength 规则来禁止一个如果另一个被填充。只需确保将 phone-group 类添加到两个输入字段以支持 require_from_group 规则。

$("form").validate({
    rules: {
        mobile: {
            require_from_group: [1, ".phone-group"], 
            maxlength: {param: 0, depends: "#telephone:filled"}
        },
        telephone: {
            require_from_group: [1, ".phone-group"], 
            maxlength: {param: 0, depends: "#mobile:filled"}
        }
    },
    messages: {
        mobile: "Please enter either a telephone number or a mobile number.",
        telephone: "Please enter either a telephone number or a mobile number."
    }
});
于 2014-03-19T19:32:45.653 回答