Firefox 4: Gibt es eine Möglichkeit, den roten Rand in einer erforderlichen Formulareingabe zu entfernen?

85

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 :requiredund :invalidvon 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?

Cyril N.
quelle
1
Wie wäre es mit Gliederung: 0; ?
Ass

Antworten:

150

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:

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

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 :focusPseudoklasse 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 )

  1. Fix für FF zur Validierung Ihres Platzhaltertextes: http://jsfiddle.net/c5aTe/
  2. Korrektur für die FF-Validierung während der Eingabe : http://jsfiddle.net/c5aTe/2
  3. JS-Lösung zum Umschalten von Stilen / Validierung: http://jsfiddle.net/c5aTe/4
Stuart Burrows
quelle
Großer Durchbruch, aber der "ungültige" Fehler scheint angezeigt zu werden, wenn der Benutzer auf die Eingabe klickt => wenn die Eingabe leer ist, BEVOR er tatsächlich etwas schreibt. Aber vielleicht möchte ich einen Fehler in FF4, der nicht behoben werden kann: /
Cyril N.
Aber +1 für Ihren Weg, um den schrecklichen roten Kastenschatten zu begrenzen :)
Cyril N.
Denken Sie nicht, dass Sie dies tun können, weil es seltsamerweise fast zu klug ist und sich im laufenden Betrieb bestätigt. Sie könnten mit einem zusätzlichen Javascript klug sein, das eine Klasse zum Formular hinzufügt oder daraus entfernt, wenn es gesendet wird. Dann können Sie jede Validierungshervorhebung überschreiben, die darauf basiert, ob diese Klasse vorhanden ist oder nicht. Das Schöne daran ist, dass immer noch die native Validierung verwendet wird. Nicht so schön ist, dass zusätzliche js erforderlich sind ...: |
Stuart Burrows
1
hatte einige Inspiration beim Frühstück - oben hinzugefügt!
Stuart Burrows
Klug! : p Aber wenn Sie einen Blick darauf werfen, haben Sie den Schatten für den ursprünglichen Zustand UND den Kastenschatten für den ungültigen Zustand. Beide werden angezeigt. Ich fange an zu glauben, dass dies ein Fehler von Mozilla ist, sie haben nicht über den Ausgangszustand nachgedacht. Wenn dies korrekt ist und niemand anderes eine vollständig funktionierende Methode hinzufügt, werde ich Ihre Antwort nicht akzeptieren, aber ich werde Ihnen das Kopfgeld geben (ich hoffe, dies ist möglich, wenn nicht, werde ich Ihre Antwort akzeptieren). Du hast es verdient :) Danke für deine Hilfe!
Cyril N.
38

Ab Firefox 26 lautet das tatsächliche CSS, das zum Identifizieren ungültiger erforderlicher Felder verwendet wird, wie folgt (stammt aus forms.css):

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

Um in anderen Browsern zu replizieren, verwende ich:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

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:

input:invalid {
    box-shadow: none;
}
Dan
quelle
Kleine Präzision: Es sollte :not(output):-moz-ui-invalidnicht input:not(output):-moz-ui-invalidfür diejenigen sein, denen dies gefallen hat.
Skoua
Du bist eine absolute Legende.
abejdaniels
2

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:

:required {
    border-color: rgba(82, 168, 236, 0.8);
}
Randy Greencorn
quelle
1

Das hat bei mir gut funktioniert:

input:invalid {
     -moz-box-shadow: none;
}
WVDominick
quelle
7
Das Problem hierbei ist, dass nach der Validierung der Box-Schatten auf Null bleibt und der Benutzer keine Ahnung hat, wo die Fehler auftreten. Ich möchte den roten Rand NICHT im normalen Zustand des Formulars anzeigen, sondern ihn anzeigen, wenn der Benutzer das Formular sendet / verwischt, wenn ein Fehler auftritt.
Cyril N.
1

Versuchen:

document.getElementById('myform').reset();
Andriy
quelle
0

Bitte versuchen Sie dies,

$ ("form"). attr ("novalidate", true);

für Ihr Formular in Ihrer globalen .js-Datei oder im Header-Bereich.

Anoop Velluva
quelle