Как проверить, завершена ли проверка формы html5

У меня есть форма, использующая 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();
});

Есть ли способ определить, проверена ли форма?

Ответ 1

Вы можете использовать функцию валидатора form(), например.

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

Ответ 2

Не привязываться к событию клика кнопки отправки просто привязывается к событию отправки вашей формы:

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

Ответ 3

Вероятно, лучше не полагаться на браузер для проверки ваших данных, обязательно используя required и pattern - это круто, и все, кроме меня, не будут зависеть от него.

Напишите свою собственную проверку в свой javascript, прежде чем данные будут отправлены на ваш URL. Вы можете сделать это с помощью Regex или вы можете использовать многие доступные плагины проверки jQuery, такие как h5validate или Validation.

Ответ 4

Вы можете зарегистрироваться на стандартное событие 'onsubmit', которое будет запущено, если форма успешно прошла проверку и отправляется.

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