javascript - 如果 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>