Firefox 4: Czy istnieje sposób na usunięcie czerwonej ramki w wymaganym formularzu?

85

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?

Cyryl N.
źródło
1
A co z konspektem: 0; ?
As

Odpowiedzi:

150

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
Stuart Burrows
źródło
Wielki przełom, ale "nieprawidłowy" błąd wydaje się być pokazywany, gdy użytkownik kliknie wejście =>, gdy dane wejściowe są puste, ZANIM faktycznie coś napisze. Ale może to, czego chcę, to błąd w FF4, którego nie można rozwiązać: /
Cyril N.
Ale +1 za drogę do ograniczenia okropnego cienia czerwonego pudełka :)
Cyril N.
Nie myśl, że możesz to zrobić, ponieważ, o dziwo, jest to prawie zbyt sprytne i sprawdza się w locie. Możesz sprytnie posługiwać się dodatkowym skryptem javascript, który dodaje lub usuwa klasę z formularza podczas przesyłania. Następnie możesz przesłonić dowolne podświetlanie walidacyjne oparte na obecności tej klasy lub jej braku. Fajną rzeczą w tym jest to, że nadal używa natywnego sprawdzania poprawności, niezbyt przyjemne wymaga dodatkowego js ...: |
Stuart Burrows
1
inspirację przy robieniu śniadania - dodane powyżej!
Stuart Burrows
Sprytny! : p Ale jeśli spojrzysz, masz cień dla stanu oryginalnego ORAZ cień ramki dla stanu nieprawidłowego. Oba są pokazane. Zaczynam wierzyć, że to błąd Mozilli, nie pomyśleli o stanie początkowym. Jeśli to prawda i nikt inny nie doda całkowicie działającego sposobu, aby to zrobić, nie przyjmuję Twojej odpowiedzi, ale dam ci nagrodę (mam nadzieję, że to możliwe, jeśli nie, przyjmuję twoją odpowiedź). Zasługujesz na to :) Dzięki za pomoc!
Cyril N.
38

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;
}
Dan
źródło
Mała precyzja: powinien być :not(output):-moz-ui-invalidnie input:not(output):-moz-ui-invaliddla tych, którzy próbowali podobało.
Skoua
Jesteś absolutną legendą.
abejdaniels
2

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);
}
Randy Greencorn
źródło
1

To działało dobrze dla mnie:

input:invalid {
     -moz-box-shadow: none;
}
WVDominick
źródło
7
Problem polega na tym, że po walidacji cień pola pozostaje zerowy, a użytkownik nie ma pojęcia, gdzie występują błędy. Chcę NIE wyświetlać czerwonej ramki w normalnym stanie formularza, ale pokazywać ją, gdy użytkownik przesyła / zamazuje formularz, jeśli wystąpi błąd.
Cyril N.
1

Próbować:

document.getElementById('myform').reset();
Andriy
źródło
0

Spróbuj tego,

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

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

Anoop Velluva
źródło
0

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.

kylew
źródło