在“require_from_group_exact”验证输入之前使用任何输入的 jQuery 验证无法正确验证答案

【问题标题】：jQuery validation with any inputs before an 'require_from_group_exact' validated input does not validate properly在“require_from_group_exact”验证输入之前使用任何输入的 jQuery 验证无法正确验证
【发布时间】：2016-01-30 21:40:35
【问题描述】：

我正在使用 jQuery 验证插件来验证 html 页面上的许多输入。名字始终是必需的，电子邮件或手机都需要，但不能同时使用。为此，我使用了 require_from_group_exact 方法。

当输入按此顺序时，验证会完美进行：

<form>
  Email: <input class="commsinfo" name="email"><br>
  Mobile: <input class="commsinfo" name="mobile"><br>
  Name: <input name="firstname"><br>
  <input type="submit">
</form>

但是，如果您交换输入，则无法正确验证最后一个输入（名字）（您必须输入名字然后删除它才能触发验证） - 为什么？？。这是我想要解决的期望顺序和问题 - 是 jQuery Validation Plugin 还是我的代码的错误？

<form>
  Name: <input name="firstname"><br>
  Email: <input class="commsinfo" name="email"><br>
  Mobile: <input class="commsinfo" name="mobile"><br>
  <input type="submit">
</form>

我创建了一个 JSFiddle 的版本，它没有正确验证。 jQuery.validator.addMethod 和 $('form').validate 的代码可以在小提琴中看到。

【问题讨论】：

标签： javascript jquery html validation

【解决方案1】：

您没有检查所有输入字段，

更改var fields = $(selector, element.form);

致var fields = $('form :input');

Updated Fiddle

【讨论】：

我想我误解了valid() 的作用。我的印象是它只返回一个表明表单有效性的值，没有别的。我想我错了。

【解决方案2】：

在您提供的示例中，对fields.valid() 的调用似乎存在问题。

我已更新小提琴以删除一些我认为您不需要的代码。对valid() 的调用似乎是问题的症结所在，删除它会导致验证按预期工作。

更新后的代码现在如下所示：

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];

  return validOrNot;
}, jQuery.format("Please fill {0} of these fields."));

$('form').validate({
  rules: {
    firstname: { required: true },
    email: { require_from_group_exact: [1, ".commsinfo"] },
    mobile: { require_from_group_exact: [1, ".commsinfo"] },
  }
});

Updated Fiddle

【讨论】：

不起作用，请尝试提交空表单并输入电子邮件值。移动消息不会消失。
是的，你是对的。我没有意识到。您的解决方案是最合适的。
验证按预期工作，但一旦显示错误消息，应在您输入有效数据时将其删除。例如，提交空白电子邮件和手机会出错。当您开始键入电子邮件时，移动消息在它应该消失的时候仍然存在。我认为这是@TheOnlyError 删除该部分代码的结果。
你看过@TheOnlyError的例子小提琴吗？
罗杰 - 完美的解决方案！它还可以包括验证<textarea> 输入，这是一个巨大的好处！ TYVM。

【解决方案3】：

每次调用

字段.有效（）；

你的验证器方法被调用，所以你得到了明显奇怪的行为。你可以自己检查这个调试。

【讨论】：