Ich versuche ein Login-Formular zu erstellen, in dem ich die E-Mail-Adresse und das Passwort als Textbox habe. Ich habe die Validierung des E-Mail-Adresse Teil gemacht, so dass es richtige E-Mail-Adresse haben sollte und auch auf die leere Kontrollkästchen sowohl für E-Mail-Adresse und Passwort Textfeld.
Hier ist meine jsfiddle .
Ab sofort habe ich eine Benachrichtigungsbox hinzugefügt, die sagt: Invalid , wenn das Textfeld für die E-Mail-Adresse und das Passwort leer ist. Stattdessen möchte ich eine einfache Nachricht direkt unter jedem Textfeld zeigen, bitte, geben Sie Ihre E-Mail-Adresse oder Ihr Passwort ein, wenn sie leer sind?
Genau wie hier auf sitepoint blog .
Ist dies in meinem aktuellen HTML-Formular möglich?
Aktualisierung: -
%Vor%Und mein js -
%Vor%Ich arbeite mit JSP und Servlets. Sobald ich auf "Anmelden" geklickt habe, bin ich auf eine andere Seite mit einer gültigen E-Mail und einem früheren Passwort gegangen, aber jetzt passiert nichts, nachdem ich mit einer gültigen E-Mail und einem Passwort auf "Anmelden" geklickt habe.
Irgendwelche Gedanken, was könnte falsch sein?
Sie könnten nach den Feldern statische Elemente einfügen und anzeigen, oder Sie könnten die Validierungsnachricht dynamisch einfügen. Im folgenden Beispiel sehen Sie, wie Sie dynamisch injizieren.
Dieses Beispiel folgt auch der Best Practice, den Fokus auf das leere Feld zu setzen, damit der Benutzer das Problem einfach beheben kann.
Beachten Sie, dass Sie dies leicht generalisieren können, um mit jedem Label & amp; Feld (für Pflichtfelder sowieso) anstelle meines Beispiels, das jede Validierung spezifisch codiert.
Deine Geige ist aktualisiert, siehe hier: jsfiddle
Der Code:
%Vor%Das CSS:
%Vor%Wie würde ich das tun? Erstellen Sie Absatz-Tags, wo Sie Ihre Fehlermeldungen mit der gleichen Klasse haben wollen und zeigen Sie sie an, wenn die Daten ungültig sind. Hier ist meine Geige
%Vor%Ich habe auch die Absatz-Tags unterhalb der E-Mail- und Passwort-Eingaben hinzugefügt
%Vor%Tags und Links javascript html jquery css