jQuery验证 - 更改“必需”属性基于其他字段 [英] jQuery Validation - Changing "Required" Attribute based on other fields

问题描述

我正在使用jQuery Validation插件（ http://docs.jquery.com/Plugins/在我正在构建的表单上验证）。表单由6个字段集组成，每个字段集包含3个文本输入，用于电子邮件地址，名字和姓氏。标记的简化版本如下：

I'm using the jQuery Validation plugin (http://docs.jquery.com/Plugins/Validation) on a form I'm building. The form is made up of 6 fieldsets, each containing 3 text inputs for an email address, a first name and a last name. A simplified version of the markup is like so:

<form id="ref" action="submit.php" method="post">
    <fieldset id="ref_1">
        <input id="ref_1_email" type="text" />
        <input id="ref_1_fname" type="text" />
        <input id="ref_1_lname" type="text" />
    </fieldset>
    <fieldset id="ref_2">
        <input id="ref_2_email" type="text" />
        <input id="ref_2_fname" type="text" />
        <input id="ref_2_lname" type="text" />
    </fieldset>
    <fieldset id="ref_3">
        <input id="ref_3_email" type="text" />
        <input id="ref_3_fname" type="text" />
        <input id="ref_3_lname" type="text" />
    </fieldset>
</form>

依此类推，直至ref_6。但是，用户不一定需要完成每个字段 - 他们可能只选择填写字段集#ref_1和fieldset＃ref_2中的输入，并将其他字段留空。但是，如果他们输入例如ref_1的电子邮件，则还需要ref_1的名字和姓氏。所以我需要做的是检查字段集中的所有3个输入。如果它们都是空白的，则可以忽略它们，但是如果填写了其中一个输入，则必须同时完成两个邻居。到目前为止，我所有的尝试都非常繁琐（观察每个人的变化，然后评估是否空的......），任何帮助都会非常感激。

and so forth, up to ref_6. However, the user does not necessarily need to complete every field - they may only choose to fill in the inputs inside fieldset#ref_1 and fieldset#ref_2, and leave the others blank. But if they enter, for example, an email for ref_1, a first and last name for ref_1 would be required also. So what I need to do is check all 3 inputs in a fieldset. If they are all blank, they can be ignored, however if one of the inputs is filled in, it's two neighbours must be completed also. All my attempts so far have been very cumbersome (watching for a change on each one and then evaluating to see if empty...), any help would be greatly, greatly appreciated.

谢谢

更新：

我发现了一个类似问题的帖子，建议的解决方案是：

I found a post with a similar issue, with the suggested solution being:

$('#emailToName2').keyup(function () {
    $('#emailToAddress2').toggleClass('required', $(this).val());
});

但是这需要为每个输入重复上述逻辑，这对我来说似乎有些过分。什么是更有活力的方法？

But that requires the above logic duplicated for each and every input, which seems like overkill to me. What would be a more dynamic approach?

干杯！

推荐答案

您可以编写自己的自定义验证类，评估两个输入中的另一个是否已完成。

You can write your own custom validation class that evaluates if the other either of the 2 inputs have been completed.

例如。

jQuery.validator.addMethod('MyOwnValidator', function(value, element) {
    var required = false;
    $(element).parent().children('input').each(function() {
       if($(this).val() && $(this).attr('id') != $(element).attr('id')){
           required = true;
       }
    });
    return !required;
});

这将评估任何兄弟输入是否有值，如果有，则调用输入必需的。

This will evaluate if any of the sibling inputs have a value and if they do it makes the calling input required.

这篇关于jQuery验证 - 更改“必需”属性基于其他字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！