如何檢查html5表單驗證是否完成

Question

我有一個表單，它使用 html5 來驗證電子郵件和必填字段。 表單將通過ajax提交。 在我允許通過ajax提交表單之前，我如何確定表單通過了驗證。

這是我的 html：

<form action="" method="post" id="comment_form">
  <input type="hidden" name="post_id" value="<?=$post->ID ?>" />
  <label for="name">Name</label>
  <input type="text" name="name" required="required">

  <label for="email">Email Address</label>
  <input type="email" name="email" required="required">


  <label for="comment">Comment</label>
  <textarea name="comment" required="required" >
  </textarea>


  <label for="submit"></label>
  <button type="submit"class="button green meduim" id="comment_btn">Submit</button>
</form>

這是我的 jquery

$("#comment_btn").click(function(e){
  //the request url
  var url = site_url+'comments/post_comment';
  //cross site request forgery token
  var xtoken = $("input[name='xtoken']").val();
  //post data
  var dataObj = {
    "name":$('#name').val(),
    "email":$("#email").val(),
    "comment":$("#comment").val(),
    "post_id":$("input[name='post_id']").val(),
    "xtoken":xtoken
  };
  //dim form
  $('#comment_form').addClass('dim');
  //make request
  $.ajax({
    url:url,
    type:'POST',
    data:dataObj,
    dataType:'json',
    error:function() {},
    success:function(resp) {
      if(resp.status == "ok")
      {
        $('#comment_form').removeClass('dim');
      }else {
        alert("An error was encountered");
      }
    }
  });
  e.preventDefault();
});

有沒有辦法確定表單是否經過驗證？

Answer 1

不要綁定到提交按鈕的點擊事件，只需綁定到表單的提交事件：

$('#comment_form').submit(function(e){
    e.preventDefault();
    //submit via ajax
});

Answer 2

您可以使用驗證器的form()函數，例如

var validator = $("#comment_form").validate(options);
if (validator.form()) {
    // submit with AJAX
}

Answer 3

最好不要依賴瀏覽器來驗證您的數據，確保使用required和pattern很酷，但我不會依賴它。

在將數據發送到您的 URL 之前，將您自己的驗證寫入您的 javascript。 您可以使用一些Regex來完成此操作，也可以使用許多可用的 jQuery 驗證插件，例如h5validate或Validation 。

Answer 4

您可以注冊標准表單“onsubmit”事件，如果表單成功通過驗證並正在提交，則該事件將被觸發。

document.getElementById("comment_form").onsubmit = myPassedValidationHandler;

Answer 5

我使用和為我工作的更好方式是這樣的：

查詢：

$(document).on('submit', '#address-form', function(event){
    event.preventDefault();

    // submit via Ajax
});

這種方式是為了防止通過ajax提交和發送表單，問候！

Answer 6

已經很長時間了，但這是我對這種情況的處理方法。 特別是當我更喜歡使用帶有原生 HTML 驗證的 AJAX 時。

document.getElementById("myBtn").addEventListener("click", checkIfValid);
const checkIfValid = {} => {
  if(document.getElementById('myForm').checkValidity()) {
      event.preventDefault();
      // Do some AJAX stuff;
    }
}

PS：如果event.preventDefault()在if子句之外if ，它不會起作用。