Ereignis-Listener gültig für HTML5-Formularen
- Neue auf HTML5, es gibt ein "invalid" - event und Sie können fügen Sie einen listener hinzu:
document.addEventListener('invalid', function(e){ var element = $(e.target); element.addClass("invalid"); element.parent().addClass("invalid"); }, true);
Bitte beachten Sie, dass diese Veranstaltung nur funktioniert, wenn das Formular abgesendet... Wenn ich den Stil der input
input:invalid { background: red }
der Stil wird angewendet, wenn der Benutzer mit der Eingabe beginnt und seine Eingabe nicht gültig. Ist das event nur gefeuert Einreichen? Ich habe versucht, das hinzufügen der listener an die Eingänge selbst, statt des Dokuments, und es hat nicht funktioniert. - Ich einen listener hinzufügen, um auf einen Stil, um die Eingabe der Eltern... Jetzt, wenn der Benutzer korrigiert werden, es gilt wieder... ich weiß, es gibt kein "gültiges" Ereignis, also, wie kann ich es erreichen?
Ok, also hier ist ein Turnschuh --> http://jsfiddle.net/Osoascam/ceArQ/7/
Die unwirksame Zuhörer zu sein scheint, nur feuerte auf submit... ich wollte nur wissen, ob es einen Weg gibt, um einen Ereignishandler hinzuzufügen, genau wie für den focus. Sehen, wenn Sie eine
Vielen Dank im Voraus,
Óscar
InformationsquelleAutor der Frage | 2011-10-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie die :ungültige pseudo-Selektor und das Eingangs-oder das change-Ereignis, um Ihr problem zu lösen.
Hier ist eine einfache Geige http://jsfiddle.net/trixta/YndYx/.
Wenn Sie möchten, entfernen Sie die Fehler-Klasse so bald wie möglich sollten Sie die error-Klasse auf ändern und entfernen Sie Sie auf die Eingabe-Ereignis (Hinweis: Eingabe-Ereignis ist viel besser als hier vorgeschlagen, keyup, einfach, weil es auch ausgelöst wird, einfügen etc., aber es funktioniert nur mit input-Elemente, nicht textarea.)
Und hier ist eine Geige mit einer Mischung von input-und change-Ereignis:
http://jsfiddle.net/trixta/jkQEX/
Und wenn Sie wollen, um diese cross-browser können Sie einfach webshims lib , polyfill. Hier ist eine x-browser-Beispiel:
http://jsfiddle.net/trixta/RN8PA/
InformationsquelleAutor der Antwort alexander farkas
Da diese Klassen sind immer Hinzugefügt, wenn ein Formular Einreichen, entfernen Sie die Klasse vor der Validierung:
Erwartete Ergebnis:
submit
onsubmit
ausgelöst wird > Alleinvalid
class-Namen in der form entfernt werden.invalid
Ereignisse ausgelöst werden, und dieinvalid
Klassen werden Hinzugefügt, wenn notwendigUpdate
Hinzugefügt, die ein extra-block auf Ihrer fiddle, siehe aktualisiert fiddle: http://jsfiddle.net/ceArQ/10/. Ich habe implementiert die
checkValidity()
- Methode und dievalidity.valid
Eigenschaft. Nun, die Klassen werden automatisch Hinzugefügt, wenn die Eingabe ungültig ist.On-key-up, die Gültigkeit eines input-element geprüft wird. Wenn es gilt, die
invalid
Klasse ist von Ihrem übergeordneten Element entfernt.InformationsquelleAutor der Antwort Rob W
Konnte Sie binden Ihre Validierungslogik, um die
focus
undblur
Veranstaltungen, oder noch besser, derkeyup
Veranstaltung.InformationsquelleAutor der Antwort mAu
Haben Sie versucht, mit
:valid
zu geben, eine Anzeige, ob ein Feld gültig ist. und Formulare ungültig sind, halten Sie einfach Ihre default-styling.Dann ruft
form.checkValidity()
im submit-handler? (Der browser sollte dann sagen Sie dem Endbenutzer das Formular-element ist nicht gültig).InformationsquelleAutor der Antwort Raynos