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

我正在构建的表单上使用jQuery验证插件（）。表单由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").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();
});

---

您可能可以进行一些重构，这样就不必对每个字段重复所有这些操作…

未尝试，也未正确编写：

$("#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...
   }
});

另外，确保每个

输入

都有一个与其

id

相同的

名称

属性

---

实际上我自己还没有尝试过，但从（请参见

required（dependency expression）

）判断，它应该可以工作。

感谢您的建议。我正试图使这项工作，但它似乎将一类“有效”应用于其他“相关”字段，而不管它们是否为空。有什么想法吗？如果第一部分的另一个字段中有一个值，那么这个示例实际上只需要第一部分中的电子邮件。在

blur

事件处理程序正常工作之前，您需要为其他字段建立类似的规则……这几乎就是问题所在！以下是我对规则（我重命名了函数checksides）的内容：[code]$（'#ref'）.validate（{rules:{ref_1_email:{required:function（element）{checksides:true}}，ref_1_fname:{required:function（element）{checksides:true}}，ref_1_lname:{required:function（element）{checksides true}）；[/code]但唯一的问题是，如果我清除了所有字段，它仍然会按要求标记它们，因此表单无法提交。有什么想法吗？非常感谢（所有人！）

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

$("#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...
   }
});