convalida del modulo html5, azione del modulo void ed esecuzione di jQuery quando tutti gli elementi del modulo html5 sono convalidati?

Question

Ho un semplice modulo HTML5 che desidero sfruttare per la convalida del campo richiesta. Il mio problema è che voglio usare la convalida del modulo HTML5 ma allo stesso tempo evitare di inviare effettivamente il modulo perché invece voglio eseguire una chiamata jQuery ajax. So che è possibile disabilitare la convalida html5, ma voglio mantenere questo come il mio metodo principale di convalida dei form invece di un plugin jQuery.

Qualche 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

Secondo questa: Do any browsers yet support HTML5's checkValidity() method?, e questo potrebbe non essere l'ultima verità, dal momento che HTML5 è un work in progress, il Form.checkValidity() e element.validity.valid dovrebbe consentire l'accesso alle informazioni di convalida da JavaScript. Partendo dal presupposto che è vero, il tuo jQuery avrebbe bisogno di attaccarsi alla forma presentare e fare uso di che:

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

    // do whatever you want here 
}); 

Answer 2

Usa:

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

    return false; 
}); 

Answer 3

Utilizzando java script puro

<script> 

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

    </script> 

Answer 4

Questa è una sottile leva del comportamento predefinito e javascript per creare ciò che desideri.

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

Se il form è valido, allora preventDefault() e continuare con la funzione (ad esempio inviare oltre Ajax). Se non è valido, restituire senza impedire l'impostazione predefinita, è necessario trovare le azioni predefinite per la convalida del modulo sugli input del modulo.