如何检查html5表单验证是否完成

Question

I have a form which am using html5 to validate for email and required fields. The form is to be submitted via ajax. How do i determine that the form passed validation before i allow to form to submitted via ajax.

This is my 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>

This is my 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();
});

Is there a way to determine if the form is validated?

Answer 1

Don't bind to the click event of the submit button simply bind to the submit event of your form:

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

Answer 2

You can use the validator's form() function, eg

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

Answer 3

It's probably best not to rely on the browser to validate your data, sure using required and pattern is cool and all but i wouldn't depend on it.

Write your own validation into your javascript before the data is sent off to your URL. You could do this with a bit of Regex or you could use many of the jQuery validation plugins available out there such as h5validate or Validation .

Answer 4

您可以注册标准表单“onsubmit”事件，如果表单成功通过验证并正在提交，则该事件将被触发。

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

Answer 5

The better way I use and work for me is this one:

JQuery :

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

    // submit via Ajax
});

This way is for prevent submit and send form via ajax , regards!

Answer 6

It's been long, but here is my aproach to this kind of situation. Especially when i prefer to use AJAX with native HTML validation.

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

PS: If event.preventDefault() is used outside if clause, it doesn't do the trick.