web-dev-qa-db-fra.com

Validation HTML5 avant la soumission d'ajax

Cela devrait être simple, mais cela me rend fou. J'ai un formulaire html5 que je soumets avec ajax. Si vous entrez une valeur non valide, une réponse contextuelle vous l'indique. Comment puis-je vérifier que les entrées sont valides avant d'exécuter mon envoi ajax? 

forme:

<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 protected]" />
  <label for="message">Message:</label>
  <textarea name="message" id="message" required></textarea>
  <input type="submit" id="submit"/>
</form>

soumettre:

$('#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");
        }
    });
});
jqueryajaxhtml5formsvalidation
32
Sorry-Im-a-N00b

Par défaut, jQuery ne sait rien de la validation HTML5, vous devez donc faire quelque chose comme:

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

Si vous vous liez à l'événement submit au lieu de cliquer, il ne se déclenchera que s'il passe la validation HTML5.

Il est recommandé de mettre en cache vos sélecteurs jQuery dans des variables si vous l'utilisez plusieurs fois pour ne pas avoir à parcourir le DOM chaque fois que vous accédez à un élément. jQuery fournit également une fonction .serialize () qui gérera l'analyse des données de formulaire pour vous.

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");
        }
    });
});
41
csbarnes

Si vous utilisez la validation de formulaire HTML5, vous devez envoyer la demande ajax dans le gestionnaire d'envoi du formulaire. Le gestionnaire d'envoi ne se déclenchera que si le formulaire est validé. Ce que vous utilisez est un gestionnaire de clic sur un bouton qui sera toujours déclenché car il n’est associé à aucune validation de formulaire. REMARQUE: tous les navigateurs ne prennent pas en charge la validation de formulaire html5.

4
Musa

Je préfère utiliser le gestionnaire d'envoi jQuery, vous obtiendrez toujours la réponse à votre formulaire avec la méthode suivante.

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;
});
1
Mfoo

Pas vraiment sûr de ce que tu veux dire. Mais je suppose que vous voulez vérifier en temps réel si la saisie est valide. Si tel est le cas, vous devez utiliser .keyup au lieu de l'événement .click, car cela entraînerait une action si l'utilisateur appuyait sur soumettre. Regardez http://api.jquery.com/keyup/

Avec cela, vous pouvez vérifier l’entrée avec chaque nouvelle insertion de caractère et l’afficher, par exemple. "non valide" jusqu'à ce que votre validation soit vraie. 

J'espère que cela répond à votre question! 

0
Kurt