Convalida HTML5 prima dell’invio di ajax

Questo dovrebbe essere semplice, ma mi sta facendo impazzire. Ho un modulo html5 che sto inviando con ajax. Se inserisci un valore non valido, c’è una risposta popup che ti dice così. Come posso verificare che le voci siano valide prima di eseguire il mio invio ajax?

modulo:

Sottoscrivi:

 $('#submit').click(function(){ var name = $("input#name").val(); var subject = $("input#subject").val(); var email = $("input#email").val(); var message = $("input#message").val(); var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; $.ajax({ url: "scripts/mail.php", type: 'POST', data: dataString, success: function(msg){ disablePopupContact(); $("#popupMessageSent").css("visibility", "visible"); }, error: function() { alert("Bad submit"); } }); }); 

Per impostazione predefinita, jQuery non sa nulla sulla convalida HTML5, quindi dovresti fare qualcosa del tipo:

 $('#submit').click(function(){ if($("form")[0].checkValidity()) { //your form execution code }else console.log("invalid form"); }); 

Se esegui il binding all’evento di invio anziché fare clic, verrà triggersto solo se supera la convalida HTML5.

È consigliabile memorizzare i selettori jQuery nelle variabili se lo si utilizza più volte in modo da non dover navigare nel DOM ogni volta che si accede a un elemento. jQuery fornisce anche una funzione .serialize () che gestirà l’analisi dei dati del modulo per te.

 var $contactForm = $('#contactForm'); $contactForm.on('submit', function(ev){ ev.preventDefault(); $.ajax({ url: "scripts/mail.php", type: 'POST', data: $contactForm.serialize(), success: function(msg){ disablePopupContact(); $("#popupMessageSent").css("visibility", "visible"); }, error: function() { alert("Bad submit"); } }); }); 

Se si utilizza la convalida del modulo HTML5, è necessario inviare la richiesta ajax nel gestore di invio del modulo. Il gestore di invio verrà triggersto solo se il modulo è valido. Quello che stai utilizzando è un gestore di clic del pulsante che verrà sempre triggersto perché non ha alcuna associazione con la convalida del modulo. NOTA: non tutti i browser supportano la convalida del modulo html5.

Preferisco usare il gestore di invio jQuery, riceverai comunque la risposta al tuo modulo con il seguente metodo.

 jQuery('#contactForm').on('submit', function (e) { if (document.getElementById("contactForm").checkValidity()) { e.preventDefault(); jQuery.ajax({ url: '/some/url', method: 'POST', data: jQuery('#contactForm').serialize(), success: function (response) { //do stuff with response } }) } return true; }); 

Non sei proprio sicuro di cosa intendi. Ma presumo che tu voglia controllare in tempo reale se l’input è valido. Se è così, dovresti usare .keyup invece di .click event, perché questo porterebbe a un’azione se l’utente preme submit. Guarda http://api.jquery.com/keyup/

Con questo è ansible controllare l’input con ogni nuovo inserimento di caratteri e visualizzare ad esempio “non valido” fino a quando la validazione è vera.

Spero che questo risponda alla tua domanda!

U può anche usare il metodo jquery validate per convalidare il modulo come

$ (“# form id”). validate ();

che restituiscono il valore booleano in base alla convalida del modulo e anche tu puoi vedere l’errore nel registro utilizzando il metodo errorList.

per l’utilizzo sopra la funzionalità u deve includere il file jquery.validate.js nel tuo script