jQueryvalidation – 根据其他字段更改“必需”属性
我在我正在构建的表单上使用jQuery Validation插件（ http://docs.jquery.com/Plugins/Validation ）。 表单由6个字段集组成，每个字段集包含3个文本输入，用于电子邮件地址，名字和姓氏。 标记的简化版本如下：
等等，直到ref_6。 但是，用户不一定需要完成每个字段 – 他们可能只选择填写字段集#ref_1和fieldset＃ref_2中的输入，并将其他字段留空。 但是，如果他们输入例如ref_1的电子邮件，则还需要ref_1的名字和姓氏。 所以我需要做的是检查字段集中的所有3个输入。 如果它们都是空白的，则可以忽略它们，但是如果填写了其中一个输入，则必须同时完成两个邻居。 到目前为止，我所有的尝试都非常麻烦（观察每个人的变化，然后评估是否空洞……），任何帮助都会非常非常感激。
谢谢
更新：
我找到了一个类似问题的post，建议的解决方案是：
$('#emailToName2').keyup(function () { $('#emailToAddress2').toggleClass('required', $(this).val()); });
但是这需要为每个输入重复上述逻辑，这对我来说似乎有些过分。 什么是更有活力的方法？
干杯!
指示需要字段时，可以指定表达式或回调 。 然后，validation插件将在validation字段之前评估表达式或回调。
这是一个例子：
$("#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(); });
可能有一些重构，你可以这样做，你不必为每个字段重复所有这些…
您可以编写自己的自定义validation类，以评估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; });
这将评估任何兄弟输入是否有值，如果有，则需要调用输入。
没有尝试，也没有正确写：
$("#ref input").keyup(function () { $(this).parents("fieldset").children("input").toggleClass("required", $(this).val()); });
你不能在一个循环中完成所有操作，因为你需要在切换类之前检查兄弟姐妹。 但是，您可以定义一个可以检查和应用的小循环函数，但是您需要多次调用它来维护逻辑。
试试这个：
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'); }) } }); });
只是为一个项目调查这个。 根据文档，以下应该做你想要的。
首次在表单上调用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的name属性与其id相同。
我自己并没有真正尝试过，但是根据文档判断（参见required(dependency-expression) ），它应该可行。