html5 validación de formulario, acción de forma vacía y ejecutar jQuery cuando se validan todos los elementos de formulario html5?

Question

Tengo un formulario HTML5 simple que quiero aprovechar para la validación de campo requerida. Mi problema es que quiero usar la validación de formulario HTML5 PERO, al mismo tiempo, evitar enviar el formulario porque quiero ejecutar una llamada jQuery ajax. Sé que puede deshabilitar la validación de html5, pero quiero mantener esto como mi método principal de validación de formulario en lugar de un complemento de jQuery.

¿Alguna idea?

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

De acuerdo con esto: Do any browsers yet support HTML5's checkValidity() method?, y esto puede no ser la última verdad ya que HTML5 es un trabajo en progreso, el Form.checkValidity() y element.validity.valid debería permitirle acceder a información de validación desde JavaScript. Suponiendo que eso es cierto, su jQuery tendría que unirse a la forma presente y hacer uso de lo siguiente:

$('#membershipform').submit(function(event){ 
    // cancels the form submission 
    event.preventDefault(); 

    // do whatever you want here 
}); 

Answer 2

Uso:

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

    return false; 
}); 

Answer 3

El uso de la escritura de Java pura

<script> 

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

    </script> 

Answer 4

Esta es una influencia sutil del comportamiento predeterminado y JavaScript para crear lo que desea.

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

Si el formulario es válido entonces preventDefault() y continuar con su función (por ejemplo, enviar a través de Ajax). Si no es válido y luego regresa sin impedir el incumplimiento, debe encontrar las acciones predeterminadas para la validación de formulario en las entradas de su formulario.