如果 jQuery 表单有效，则显示隐藏的 div

Question

我一直在用两个相同的表单进行一些表单验证。到目前为止，我对表单进行了默认的 HTML 验证，但是由于某种原因，当我提交表单时，它重新加载了表单，它没有显示我的成功消息。

这是我的表格：

HTML

<div class="place-form">
   <div class="success-msg" style="display:none;">
    <p>Thanks for your submission! We will contact you shortly.</p>
  </div>
  <div class="form-wrap">
    <form id="place-form-item">
    <div class="form-row">
      <input id="fname" type="text" name="fname" placeholder="Your First Name" required />
    </div>
    <div class="form-row">
      <input id="lname" type="text" name="lname" placeholder="Your Last Name" required />
    </div>
    <div class="form-row">
      <input id="form-email" type="email" name="email" placeholder="Your Email" required />
    </div>
    <div class="btn-row">
      <button class="submit-btn">submit</button>
    </div>
      </form>
  </div>
</div>

JS：

$(".submit-btn").click(function(e){
   var $this = $(this);
   if($this.find("#place-form-item").valid()) {
       $this.parents(".form-wrap").hide();
       $this.parents().next(".success-msg").show()
     e.preventDefault();
   }
});

不确定如何获取它，以便在单击时表单通过验证，然后隐藏一个表单并显示成功消息。除非我的目标不正确。

Answer 1

嗯，首先你知道.valid() 方法是一个JQuery 插件，对吧？如果没有插件，if 语句中的代码将永远无法到达。

有一个纯 JavaScript API 用于根据 HTML5 有效性框架检查表单的有效性 - .checkValidity()。

接下来，您的.next() 调用不会找到成功消息，因为它不是按钮的下一个元素。这和你的.find() 调用都可以通过使用更高级别的选择器作为搜索上下文来替换。

接下来，不要使用提交按钮的click 事件。使用表单的 submit 事件。

最后，使用 CSS 类比在元素上动态创建内联样式更好。

$("#place-form-item").on("submit", function(e){
   var $this = $(this);
   if(this.checkValidity()) {
      e.preventDefault();
      $this.parents(".form-wrap").hide();
      $(".success-msg", ".place-form").removeClass("hidden")
   }
});

.hidden { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="place-form">

  <div class="success-msg hidden">
    Thanks for your submission! We will contact you shortly.
  </div>
  
  <div class="form-wrap">
  
    <form id="place-form-item">
      <div class="form-row">
        <input id="fname" type="text" name="fname" placeholder="Your First Name" required>
      </div>
      <div class="form-row">
        <input id="lname" type="text" name="lname" placeholder="Your Last Name" required>
      </div>
      <div class="form-row">
        <input id="form-email" type="email" name="email" placeholder="Your Email" required>
      </div>
      <div class="btn-row">
        <button class="submit-btn">submit</button>
      </div>
    </form>
    
  </div>
</div>

Answer 2

拦截提交事件，阻止默认表单提交，替换为自己的动作。

$("#my-form").on("submit", function (event) {
    event.preventDefault();
    if ($(this).valid()) {
        // do something
    }
});

Answer 3

问题在于 .next() 只针对立即跟随目标的兄弟姐妹。鉴于您的结构，.success-msg precedes .form-wrap。因此，.next() 无法定位它。

要解决此问题，您可以定位父元素.place-form，而不是$this.parents().next(".success-msg").show()，然后利用.find() 找到相关的.success-msg 和$this.parents(".place-form").find(".success-msg").show()。

您还需要将 e.preventDefault() 移到条件之外。

这可以在下面的例子中看到：

$(".submit-btn").click(function(e) {
  e.preventDefault();
  var $this = $(this);
  if ($('#place-form-item').valid()) {
    $this.parents(".form-wrap").hide();
    $this.parents(".place-form").find(".success-msg").show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<div class="place-form">
  <div class="success-msg" style="display:none;">
    <p>Thanks for your submission! We will contact you shortly.</p>
  </div>
  <div class="form-wrap">
    <form id="place-form-item">
      <div class="form-row">
        <input id="fname" type="text" name="fname" placeholder="Your First Name" required />
      </div>
      <div class="form-row">
        <input id="lname" type="text" name="lname" placeholder="Your Last Name" required />
      </div>
      <div class="form-row">
        <input id="form-email" type="email" name="email" placeholder="Your Email" required />
      </div>
      <div class="btn-row">
        <button class="submit-btn">submit</button>
      </div>
    </form>
  </div>
</div>

希望这会有所帮助！ :)