jQuery以类似的形式验证单个输入

Question

我在一个页面上有两个相同的表单，但我正在尝试验证一个字段（在本例中为电子邮件），但我似乎无法让它仅验证一个输入字段为它只是显示两种形式的错误。

HTML：

<div class="general-form">
  <div class="email-error" style="display:none;">
    <p>You need valid email</p>
  </div>
  <div class="form-wrap">
    <div class="form-row">
      <input id="from-email" type="email" name="email" placeholder="Your Email" />
    </div>
    <div class="btn-row">
      <button class="submit-btn">Submit</button>
    </div>
  </div>
</div>

<div class="general-form">
  <div class="email-error" style="display:none;">
    <p>You need valid email</p>
  </div>
  <div class="form-wrap">
    <div class="form-row">
      <input id="from-email" type="email" name="email" placeholder="Your Email" />
    </div>
    <div class="btn-row">
      <button class="submit-btn">Submit</button>
    </div>
  </div>
</div>

JS：

$(".submit-btn").on("click", function() {
  var $this = $(this);
  var valid_email = $this.find("#from-email").val();
  if (/(.+)@(.+){2,}\.(.+){2,}/.test(valid_email)) {
    return true;
  } else {
    $this.parents().find(".email-error").show();
    return false;
  }
});

总的来说，我可以让它通过验证，但错误消息显示 both 表单，我不知道如何获取它，所以它只显示该特定的错误消息形式。我猜我在链条上推得太远了，它正在测试这两种形式，但我不记得具体针对哪一种，如果这有意义的话。

Answer 1

你加倍了 id from-email 这就是原因。在您的 JS 中，您正在检查 ID 为 from-email 的所有字段，在这种情况下，两个输入都被检查，因为两个 id。

如果其中一个是错误的，您将在您所有的父母中搜索email-error，它将上升到正文，然后找到所有错误包装器。 $this.parents(“.general-form“) 将完成交易，并且只会在您的情况下进入输入和错误的包装。

始终确保您的 ID 是唯一的。

Answer 2

只需添加 required> 属性并添加这个 js

$("#formid").validate();