Convalida HTML5 prima di inviare ajax

Question

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?

forma:

<form id="contactForm" onsubmit="return false;"> 
    <label for="name">Name:</label> 
    <input type="text" name="name" id="name" required placeholder="Name" /> 
    <label for="subject">Subject:</label> 
    <input type="text" name="subject" id="subject" required placeholder="Subject" /> 
    <label for="email">Email:</label> 
    <input type="email" name="email" id="email" required placeholder="email@example.com" /> 
    <label for="message">Message:</label> 
    <textarea name="message" id="message" required></textarea> 
    <input type="submit" id="submit"/> 
</form> 

conferma:

$('#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"); 
     } 
    }); 
}); 

Answer 1

Per impostazione predefinita, jQuery non sapere nulla circa la validazione HTML5, in modo che avrebbe dovuto fare qualcosa di simile:

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

Answer 2

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 è possibile controllare l'input con ogni nuovo inserimento di caratteri e visualizzare ad es. "non valido" fino a quando la validazione è vera.

Spero che questo risponda alla tua domanda!

Answer 3

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

Answer 4

U può anche utilizzare il metodo validate jQuery per convalidare forma come

$ ("# form id") validate().;

che restituiscono il valore booleano in base alla convalida del modulo & Inoltre è possibile visualizzare l'errore nel registro utilizzando il metodo errorList.

per l'uso sopra la funzionalità u deve includere il file jquery.validate.js nello script

Answer 5

Se si associa all'evento inviare invece di clic sarà solo il fuoco se passa la validazione HTML5.

È consigliabile memorizzare nella cache i selettori jQuery in 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"); 
     } 
    }); 
}); 

Answer 6

Preferisco utilizzare il gestore di invio jQuery, otterrete comunque la risposta al 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; 
});