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 :required
i :invalid
z 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?
attributes
border
firefox4
required
Cyryl N.
źródło
źródło
Odpowiedzi:
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ć:
lub coś podobnego ...
ALE ponieważ FF4 decyduje się na walidację tekstu zastępczego (nie mam pojęcia dlaczego ...)
!important
wymagane 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ć
:focus
pseudoklasy, 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 )
źródło
Od wersji Firefox 26 rzeczywisty kod CSS używany do identyfikowania nieprawidłowych wymaganych pól jest następujący (pochodzi z forms.css):
Do replikacji w innych przeglądarkach używam:
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ć:
źródło
:not(output):-moz-ui-invalid
nieinput:not(output):-moz-ui-invalid
dla tych, którzy próbowali podobało.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ą:
źródło
To działało dobrze dla mnie:
źródło
Próbować:
źródło
Spróbuj tego,
$ ("formularz"). attr ("novalidate", true);
dla swojego formularza w globalnym pliku .js lub w sekcji nagłówka.
źródło
Sposób, który przynajmniej w większości rozwiązuje problem, to:
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.
źródło