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

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

Answer 1

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

如果其中一个是错的，那么你正在寻找所有父母的email-error，这些父母将进入身体，然后找到所有错误包装器。 $this.parents(“.general-form“)将执行此交易，并且只针对您输入和错误的包装器。

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

Answer 2

只需添加必需的＆gt;属性并添加此js

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

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

2 个答案: