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?

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

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;
}

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);
}

Das hat bei mir gut funktioniert:

input:invalid {
     -moz-box-shadow: none;
}

Versuchen:

document.getElementById('myform').reset();

Bitte versuchen Sie dies,

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

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