Wenn dies in einem Formularfeld definiert ist, zeigt Firefox 4 automatisch einen roten Rand für dieses Element an, selbst bevor der Benutzer auf die Schaltfläche "Senden" klickt.
<input type="text" name="example" value="This is an example" required />
Ich denke, dass dies für den Benutzer störend ist, da er / sie am Anfang keine Fehler gemacht hat.
Ich möchte diesen roten Rand für den Ausgangszustand ausblenden, ihn aber anzeigen, wenn der Benutzer auf die Schaltfläche "Senden" klickt, wenn ein fehlendes Feld als erforderlich markiert ist.
Ich schaute auf :required
und :invalid
von neuem Pseudo - Selektor, aber die Änderungen sind für vor und nach der Validierung. (von Firefox 4 Erforderliches Eingabeformular ROTER Rand / Umriss )
Gibt es eine Möglichkeit, den roten Rand zu deaktivieren, bevor der Benutzer das Formular sendet, und es anzuzeigen, wenn Felder fehlen?
quelle
Antworten:
Das war etwas knifflig, aber ich habe dieses Beispiel eingerichtet: http://jsfiddle.net/c5aTe/, das für mich funktioniert. Grundsätzlich scheint der Trick darin zu bestehen, Platzhaltertext zu haben, der ungültig ist. Andernfalls sollten Sie in der Lage sein:
oder etwas ähnliches...
ABER da FF4 beschließt, Ihren Platzhaltertext zu validieren (keine Ahnung warum ...), ist die Lösung in der Geige (kleine Hacky-Verwendungen
!important
) erforderlich.Hoffentlich hilft das!
BEARBEITEN
Doh !! - Ich fühle mich gut dumm. Ich habe meine Geige aktualisiert: http://jsfiddle.net/c5aTe/2/ - Sie können die
:focus
Pseudoklasse verwenden, um das Element so zu gestalten, als ob es gültig wäre, während der Benutzer tippt. Dies wird immer noch rot hervorgehoben, wenn der Inhalt ungültig ist, wenn das Element den Fokus verliert, aber ich denke, Sie können mit dem entworfenen Verhalten nur so viel anfangen ...HTH :)
BEARBEITEN nach Abnahme:
Zusammenfassung der Beispiele auf Anfrage von OP (beachten Sie, dass die ersten beiden nur für FF4 ausgelegt sind - nicht für Chrome )
quelle
Ab Firefox 26 lautet das tatsächliche CSS, das zum Identifizieren ungültiger erforderlicher Felder verwendet wird, wie folgt (stammt aus forms.css):
Um in anderen Browsern zu replizieren, verwende ich:
Ich habe mit den Pixeleinstellungen herumgespielt, aber ich hätte die 1,5px nie erraten, ohne auf die Moz-Quelle zu schauen.
Um es zu deaktivieren, können Sie verwenden:
quelle
:not(output):-moz-ui-invalid
nichtinput:not(output):-moz-ui-invalid
für diejenigen sein, denen dies gefallen hat.Hier ist eine sehr einfache Lösung, die für mich funktioniert hat. Grundsätzlich habe ich das hässliche Rot in ein sehr schönes Blau geändert, das die Standardfarbe für nicht benötigte Felder ist, und eine Webkonvention:
quelle
Das hat bei mir gut funktioniert:
quelle
Versuchen:
quelle
Bitte versuchen Sie dies,
$ ("form"). attr ("novalidate", true);
für Ihr Formular in Ihrer globalen .js-Datei oder im Header-Bereich.
quelle