Wie wird die HTML5-Validierung angezeigt, wenn inputElement.validity.valid == false?

Question

Ich habe also ein Formular, aber ich muss die Informationen noch nicht an den Server übermitteln... Was ich brauche, ist, um nur die Felder durch die HTML5 integrierte Validierung Bedingungen (wie E-Mail, etc.), und wenn wahr, nur eine bestimmte Funktion ausführen...

Bis jetzt habe ich folgendes herausgefunden...

function checkform()
{
    var /* all the elements in the form here */

    if (inputElement.validity.valid == 'false')
    {
        /* Submit the form, 
        this will cause a validation error, 
        and HTML5 will save the day... */
    } else
    {
        navigateNextStep();
    }
}

Das ist die Logik, die ich mit so weit kommen, und seine ein wenig hinterhältig, weil ich übermitteln, WISSEN, dass es einen ungültigen Wert, damit die Validierung Eingabeaufforderungen auslösen...

Mein einziges Problem mit der obigen Logik ist, dass ich etwa 7-8 Eingabeelemente habe, und ich finde die Möglichkeit, das Folgende zu tun, eher "schmutzig":

var inputs = document.getElementsByTagName("INPUT");
if (!inputs[0].validity.valid && !inputs[1].validity.valid && ...)

Ideen?

Answer 1

Sie können einfach anrufen formEl.checkValidity() ... Dies gibt einen booleschen Wert zurück, der angibt, ob das gesamte Formular gültig ist oder nicht, und wirft entsprechende invalid Ereignisse sonst.

Die Spezifikation

Ein kurzes JSFiddle zum Mitspielen

Ich bin mir nicht sicher, wie Sie erwarten, dass das Absenden des Formulars die Validierungs-UI des Browsers auslöst, obwohl. Aufruf von formEl.submit() scheint unabhängig vom Validierungsstatus zu einer Übermittlung zu führen. Dies ist am Ende der Seite Die H5F-Projektseite in dem es heißt:

Safari 5, Chrome 4-6 und Opera 9.6+ blockieren alle die Formularübermittlung, bis alle Bedingungen erfüllt sind.

Opera 9.6+ fokussiert beim Absenden des Formulars auf das erste ungültige Feld und zeigt in einem UI-Block an, dass dass es ungültig ist.

Safari 5.0.1 und Chrome 7 haben die Blockierung der Formularübermittlung entfernt, wenn ein Formular ungültig ist, höchstwahrscheinlich aufgrund von dass alte Formulare jetzt nicht mehr auf älteren Websites.

Answer 2

Ok, das ist jetzt etwas peinlich... Dank Domenic und dem guten alten Google bin ich auf eine alternative Lösung gestoßen...

Ich ließ eine for-Schleife laufen und prüfte, ob jedes der Eingabeelemente über die Methode imputElement.validity.valid gültig war oder nicht, die einen booleschen Wert zurückgab...

Für jedes gültige Element habe ich eine Variable um 1 erhöht und eine bedingte Anweisung in die Schleife eingefügt, um zu prüfen, ob die Variable genug erhöht wurde, um die Navigationsfunktion auszuführen...

Wenn es ein ungültiges Feld gäbe, würde die if-Anweisung nie ausgeführt werden, und (jetzt kommt der lustige Teil) der Browser würde die Felder trotzdem validieren und anzeigen, welche Felder fehlerhaft waren und vom Benutzer korrigiert werden mussten... :-)

Die For-Schleife...

for (i=0;i<8;i++)
{
    if (inputs[i].validity.valid)
        hg++;
}

if (hg==8)
    skimregform();

Answer 3

Sie können die Überprüfung jedes Feldes in Ihrem Formular programmatisch auslösen, auch wenn Sie die Funktion event.preventDefault() einstellen.

  document.forms["form_id_name"].reportValidity();