Validation of html5 form, void form action and jQuery execution when all elements of html5 form are validated?

Question

I have a simple HTML5 form that I want to use for the required field validation. My problem is that I want to use HTML5 form validation, but at the same time avoid the actual form submission, because instead I want to make a jQuery ajax call. I know that you can disable html5 validation, but I want to keep this as the main form validation method instead of the jQuery plugin.

Any thoughts?

HTML

<form action="donothing" id="membershipform" method="get" accept-charset="utf-8"> <input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required> <input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required> <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required> <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required> <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required> <p> <input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px"> </p> </form> 

JAVASCRIPT:

 $(function(){ $("#submitbtn").click(function(){ $.ajax({ url: "<?php bloginfo('template_url') ?>/ajax-membership.php", success: function(txt){ if(txt){ $("#thankyou").slideDown("slow"); } } }); }); }); 

Answer 1

Accordingly: HTML5 (?) Validation method is still supported on all browsers, and this may not be the last truth, since HTML5 is work, Form.checkValidity() and element.validity.valid should allow you to access the information About validation using JavaScript. Assuming true, your jQuery will have to join the submit form and use this:

 $('#membershipform').submit(function(event){ // cancels the form submission event.preventDefault(); // do whatever you want here }); 

Answer 2

Using:

 $('#membershipform').submit(function(){ // do whatever you want here return false; }); 

Answer 3

Using pure java script

  <script> document.getElementById('membershipform').addEventListener("submit", function(e) { event.preventDefault(); //write stuff }); </script> 

Answer 4

This is the subtle leverage of default behavior and javascript to create what you want.

 var form = document.getElementById("purchaseForm"); if(form.checkValidity()){ console.log("valid"); e.preventDefault(); }else{ console.log("not valid"); return; } 

If the form is valid, then preventDefault () and continue with your function (for example, send via ajax). If not valid, then return without preventing by default, you should find the default actions to validate the form on the form inputs.