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() 仅针对立即跟随目标的兄弟姐妹。根据您的结构，-webkit-perspective: 1000; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); 位于 .success-msg之前。因此，.form-wrap无法定位它。

要解决此问题，您可以定位父元素.next()，而不是$this.parents().next(".success-msg").show()，然后使用 .find() 来查找相关{{1}与.place-form。

您还希望将.success-msg移至有条件之外。

这可以在以下示例中看到：

$this.parents(".place-form").find(".success-msg").show()

e.preventDefault()

希望这有帮助！：）

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

3 个答案: