Gdy wymagane jest zdefiniowane w polu formularza, Firefox 4 automatycznie wyświetla czerwoną ramkę tego elementu, nawet ZANIM użytkownik naciśnie przycisk przesyłania.

<input type="text" name="example" value="This is an example" required />

Myślę, że jest to niepokojące dla użytkownika, ponieważ na początku nie popełnił błędów.

Chcę ukryć tę czerwoną ramkę dla stanu początkowego, ale pokaż ją, gdy użytkownik naciśnie przycisk wysyłania, jeśli brakuje pola oznaczonego jako wymagane.

Spojrzałem na :requiredi :invalidz nowego pseudo selektora, ale zmiany dotyczą przed i po walidacji. (z przeglądarki Firefox 4 Wymagany formularz wejściowy RED border / outline )

Czy istnieje sposób na wyłączenie czerwonej ramki przed przesłaniem formularza przez użytkownika i pokazanie jej, jeśli brakuje niektórych pól?

To było trochę trudne, ale ustawiłem ten przykład: http://jsfiddle.net/c5aTe/, który działa dla mnie. Zasadniczo wydaje się, że sztuczka polega na obejściu tekstu zastępczego, który jest nieprawidłowy. W przeciwnym razie powinieneś być w stanie to zrobić:

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

lub coś podobnego ...

ALE ponieważ FF4 decyduje się na walidację tekstu zastępczego (nie mam pojęcia dlaczego ...) !importantwymagane jest rozwiązanie w skrzypcach (małe hacky - zastosowania ).

Mam nadzieję, że to pomoże!

EDYTOWAĆ

Doh !! - Czuję się głupio. Zaktualizowałem moje skrzypce: http://jsfiddle.net/c5aTe/2/ - możesz użyć :focuspseudoklasy, aby zachować styl elementu tak, jakby był ważny, gdy użytkownik pisze. Będzie to nadal podświetlone na czerwono, jeśli treść jest nieprawidłowa, gdy element traci ostrość, ale myślę, że jest tylko tyle, co możesz zrobić z zaprojektowanym zachowaniem ...

HTH :)

EDYCJA po akceptacji:

Podsumowanie przykładów na żądanie OP (uwaga: pierwsze dwa są przeznaczone tylko dla FF4 - nie Chrome )

1. Poprawka dla FF weryfikująca tekst zastępczy : http://jsfiddle.net/c5aTe/
2. Poprawka dotycząca sprawdzania poprawności FF podczas wpisywania: http://jsfiddle.net/c5aTe/2
3. Przełączanie stylów / walidacji rozwiązania JS: http://jsfiddle.net/c5aTe/4

Od wersji Firefox 26 rzeczywisty kod CSS używany do identyfikowania nieprawidłowych wymaganych pól jest następujący (pochodzi z forms.css):

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

Do replikacji w innych przeglądarkach używam:

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

Bawiłem się ustawieniami pikseli, ale nigdy nie odgadłbym 1.5px bez spojrzenia na źródło Moz.

Aby go wyłączyć, możesz użyć:

input:invalid {
    box-shadow: none;
}

Oto bardzo proste rozwiązanie, które zadziałało dla mnie. Zasadniczo zmieniłem brzydką czerwień na bardzo ładny niebieski, który jest standardowym kolorem dla pól niewymaganych i konwencją internetową:

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

To działało dobrze dla mnie:

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

Próbować:

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

Spróbuj tego,

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

dla swojego formularza w globalnym pliku .js lub w sekcji nagłówka.

Sposób, który przynajmniej w większości rozwiązuje problem, to:

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

W ten sposób pole wejściowe zaczyna się od ładnego niebieskiego konturu, ale gdy użytkownik wprowadzi znak, jest on ustawiony na wymagany (więc jeśli wprowadzisz znak, a następnie cofniesz, pojawi się czerwona ramka). W takim przypadku użytkownik może pominąć dane wejściowe, więc jeśli to zrobisz, upewnij się, że wprowadziłeś walidację zaplecza.