it-swarm.com.de

HTML5-Validierung vor dem Senden von Ajax

Das sollte einfach sein, aber es macht mich verrückt. Ich habe ein HTML5-Formular, das ich mit Ajax einreiche. Wenn Sie einen ungültigen Wert eingeben, erhalten Sie eine Popup-Antwort. Wie kann ich überprüfen, ob die Einträge gültig sind, bevor ich meine Ajax-Sendung starte? 

bilden:

<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>

einreichen:

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

Standardmäßig weiß jQuery nichts über die HTML5-Validierung. Daher müssen Sie Folgendes tun:

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

Wenn Sie anstelle des Klicks an das Submit-Ereignis binden, wird es nur ausgelöst, wenn die HTML5-Überprüfung bestanden wird.

Es ist empfehlenswert, Ihre jQuery-Selektoren in Variablen zwischenzuspeichern, wenn Sie sie mehrmals verwenden, sodass Sie nicht jedes Mal im DOM navigieren müssen, wenn Sie auf ein Element zugreifen. jQuery bietet auch eine .serialize () - Funktion, die die Analyse der Formulardaten für Sie übernimmt.

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

Wenn Sie die HTML5-Formularüberprüfung verwenden, müssen Sie die Ajax-Anforderung im Übergabehandler des Formulars senden. Der Submit-Handler wird nur ausgelöst, wenn das Formular gültig ist. Was Sie verwenden, ist ein Button-Click-Handler, der immer ausgelöst wird, weil er mit der Formularvalidierung nicht in Verbindung steht. HINWEIS: Nicht alle Browser unterstützen die Validierung von HTML5-Formularen.

4
Musa

Ich ziehe es vor, den jQuery Submit-Handler zu verwenden. Sie erhalten die Antwort auf Ihr Formular immer noch mit der folgenden Methode.

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

Ich weiß nicht genau was du meinst. Ich gehe jedoch davon aus, dass Sie in Echtzeit prüfen möchten, ob die Eingabe gültig ist. In diesem Fall sollten Sie .keyup anstelle des .click -Ereignisses verwenden, da dies zu einer Aktion führen würde, wenn der Benutzer auf "Senden" drückt. Siehe http://api.jquery.com/keyup/

Damit können Sie die Eingabe bei jedem neuen Zeichen prüfen und z. B. anzeigen. "ungültig", bis Ihre Validierung wahr ist. 

Ich hoffe, das beantwortet deine Frage! 

0
Kurt