jQuery验证 - 基于其他字段更改“必需”属性

Question

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

<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。但是，用户不一定需要完成每个字段 - 他们可能只会选择填写fieldset＃ref_1和fieldset＃ref_2内的输入，并将其他字段留空。但是，例如，如果他们输入了ref_1的电子邮件，则还需要ref_1的名字和姓氏。所以我需要做的是检查一个字段集中的所有3个输入。如果它们全部是空白的，则可以忽略它们，但是如果其中一个输入被填充，则两个邻居也必须完成。到目前为止，我所有的尝试都非常麻烦（注意每个人的改变，然后评估是否空着......），任何帮助都会很大，非常感谢。

感谢

更新：

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

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

但这需要重复对每个输入上述逻辑，这对我来说似乎有点矫枉过正。什么会是一个更动态的方法？

干杯！

Answer 1

指示需要字段时，可以指定expression或callback。验证插件将在验证字段之前评估表达式或回调。

下面是一个例子：

$("#ref").validate({ 
    rules: { 
    ref_1_email: { 
     required: function(element) { 
     return $("#ref_1_fname").val() || $("ref_1_lname").val(); 
     } 
    } 
    } 
}); 
$("#ref_1_email").blur(function() { 
    $("#ref_1_fname").valid(); 
    $("#ref_1_lname").valid(); 
}); 

很可能有一些重构，你可以做，这样你就不必再重复所有这一切都为每个字段...

Answer 2

没试过也不正确书面形式：

$("#ref input").keyup(function() { 
$(this).parents("fieldset").children("input").toggleClass("required", $(this).val()); 
}); 

Answer 3

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

例如。

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; 
}); 

这将评估是否有任何兄弟输入有一个值，如果他们这样做，使呼叫输入需要。

Answer 4

你不能在一个循环内完成所有操作，因为你需要在切换类之前检查兄弟姐妹。但是，您可以定义一个可检查和应用的小型循环函数，但您需要多次调用它才能保持逻辑。

试试这个：

var loop = function(target, fn) { 
    var t = 0, fn = fn || function(){}; 
    $(target).siblings().andSelf().each(function(i, el) { 
     t += $(el).val().length; 
     fn(el); 
    }); 
    return t; 
} 
$('fieldset input').each(function() { 
    $(this).bind('blur', function(e) { 
     if(loop(e.target)) { 
      loop(e.target, function(el) { 
       $(el).toggleClass('required', !$(el).val().length); 
      }) 
     } else { 
      loop(e.target, function(el) { 
       $(el).removeClass('required'); 
      }) 
     } 
    }); 
}); 

Answer 5

只是调查这一个项目。根据文档，以下应该做你想要的。

当第一次调用表单上validate，像这样做：

$("#emailRecsForm").validate({ 
    rules: { 
     ref_1_email: { 
     required: ("#ref_1_fname:filled" || "#ref_1_lname:filled"), 
     email: true 
     }, 
     ref_1_fname: { 
     required: ("#ref_1_email:filled" || "#ref_1_lname:filled") 
     }, 
     ref_1_lname: { 
     required: ("#ref_1_email:filled" || "#ref_1_fname:filled") 
     }, 

     ref_2_email: { 
     required: ("#ref_2_fname:filled" || "#ref_2_lname:filled"), 
     email: true 
     }, 
     // And so on... 
    } 
}); 

此外，确保每个input S的有一个name属性等同于它id。

我自己实际上没有尝试过，但通过the docs（请参阅required(dependency-expression)）来判断，它应该有效。