Ich habe den folgenden Code, wo ich zwei E-Mail-Eingabefelder habe, die ich validieren muss, sie sind die gleichen, die erfolgreich mit jQuery value equalTo funktioniert.
%Vor%Nach erfolgreicher Validierung möchte ich die Schaltfläche aktivieren, kann aber nicht herausfinden, wie das geht.
%Vor%Im Idealfall möchte ich die Formular-Steuerelemente so einstellen, dass die Validierungszustände in Bootstrap3, hier detailliert - Ссылка, verwendet werden
Geige ist hier Ссылка
Es gibt keine jQuery Validate-Plugin-Callback-Option / -Funktion, die ausgelöst wird, wenn alle Felder gültig sind, ohne zuvor auf die Senden-Schaltfläche zu klicken.
Sie müssen einen externen keyup blur -Ereignishandler erstellen, der Ihr Formular auf Gültigkeit prüft und die Schaltfläche entsprechend aktiviert / deaktiviert; jedes Mal, wenn eine Taste gedrückt wird oder Sie ein Feld verlassen.
DEMO: Ссылка
%Vor% Da das jQuery Validate-Plugin die HTML5-Validierung des Browsers dynamisch deaktiviert, habe ich das Attribut required aus Ihrem Markup entfernt und type="email" in type="text" geändert. ( Sie haben diese Validierungsregeln bereits im Plugin angegeben.)
Sie müssen auch nicht alle Regeln zweimal angeben, wenn Sie die equalTo -Regel verwenden, da das zweite Feld bereits immer mit dem ersten übereinstimmen muss.
BEARBEITEN:
Im obigen Szenario hängt Ihre Seite vollständig von JavaScript ab. Mit anderen Worten, ohne JavaScript ist die Schaltfläche immer deaktiviert.
Wenn Sie eine serverseitige Validierung eingerichtet haben und Ihre Seite unabhängig von JavaScript sein soll, müssen Sie disabled="disabled" aus Ihrem Schaltflächen-Markup entfernen und es direkt innerhalb des DOM-fähigen Event-Handlers zu Ihrem JavaScript hinzufügen.
In diesem Szenario haben Sie auch ohne JavaScript eine funktionierende Schaltfläche, und mit JavaScript wird die Schaltfläche beim Laden der Seite programmatisch deaktiviert.
Eine elegantere und schnellere Lösung besteht darin, einfach die standardmäßigen On-Click- und On-Keyup-Ereignisse außer Kraft zu setzen, indem Sie den benötigten Code wie folgt hinzufügen, anstatt ein weiteres Listenereignis hinzuzufügen.
%Vor%Mit dem folgenden CSS-Code für den Submit-Trigger - anfänglich deaktiviert (Bootstrap 3-Klassen):
%Vor% Dies kann sehr einfach mit dem
Initialisierung des Plug-Ins mit stumm:
%Vor%Tags und Links jquery twitter-bootstrap-3 jquery-validate