Question

发生HTML5验证并且用户点击提交后，我正在尝试弹出一个模式，感谢用户提交表单。问题是，我不确定如何给出“必要”的真实或错误条件。属性，以便我的代码只有在所有字段都已正确填写后才能运行。我得到的最接近的是以下代码：

的JavaScript

 if(document.getElementById('e-mailClient').required = true || (document.getElementById('comments').required = true)) {

      $(document).ready(function(){
        $(".open").click(function(){
          $(".pop-outer").fadeIn('slow');
      });

      $(".close").click(function(){
         $(".pop-outer").fadeOut('slow');

      });

    });
    }

HTML

 <form name="frm"  method="post" action="serverSide.php" id="my-form">

<input id="e-mailClient" placeholder="E-mail" autocomplete="on" name="email" required>

 <textarea id="comments" name="comments" placeholder="Submit your comments" rows="10" cols="70" required></textarea>

   <button type="submit" value="submit" id="LeadSubmit" class="open">Send</button>

</form>

如果有人知道在点击提交时更容易获得模式弹出窗口，并且只有在前端验证发生并且所有表单字段都已正确填写之后才会知道。< / p>

Answer 1

使用HTML5方法checkValidity()

检查整个表单是否有效

$(document).ready(function(){
    $(".open").click(function(){

        var form = $('#my-form');
        if (form[0].checkValidity()) {
            $(".pop-outer").fadeIn('slow');
        }

    });

    $(".close").click(function(){
       $(".pop-outer").fadeOut('slow');
    });
});

HTML5 Forms checkValidity()

Answer 2

使用表单submit事件来显示您的模态。除非表单有效，否则不会触发此事件：

<form id="my-form">
  <label for="email">E-Mail</label>
  <input id="email" type="email" required>
  <button type="submit">Submit</button>
</form>

$(() => $('#my-form').submit(event => {
  event.preventDefault();
  alert('Form is valid!');
}));

检查JSFiddle。

如何在表单验证后才能弹出模态？

2 个答案: