Firefox 4: esiste un modo per rimuovere il bordo rosso nell'input di un modulo richiesto?


52

Quando richiesto è definito in un campo modulo, Firefox 4 mostra automaticamente un bordo rosso a questo elemento, anche PRIMA che l'utente prenda il pulsante di invio.

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

Penso che questo sia disturbante per l'utente in quanto non ha commesso errori all'inizio.

Devo nascondere quel bordo rosso per lo stato iniziale, ma mostrarlo quando l'utente preme il pulsante di invio se c'è un campo mancante contrassegnato come richiesto.

ho guardato :required e :invalid dal nuovo selettore pseudo, ma i cambiamenti sono per , prima e dopo la convalida. (da Firefox 4 Required input form RED border/outline)

C'è un modo per disabilitare il bordo rosso prima che l'utente invii il modulo e mostrarlo se ci sono dei campi mancanti?

+1

ne dite di contorno: 0; ? 19 mag. 142014-05-19 14:20:12

104

Questa è stata un po 'difficile, ma ho creato questo exmaple: http://jsfiddle.net/c5aTe/ che sta lavorando per me. Fondamentalmente il trucco sembra andare in giro con il testo segnaposto che non è valido. In caso contrario, si dovrebbe essere in grado fare questo:

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

o qualcosa di simile ...

MA dal FF4 decide di convalidare il testo segnaposto (idea del perché ...) la soluzione del violino (piccolo hacky - utilizza !important).

Spero che questo aiuti!

EDIT

Doh !! - Mi sento benissimo. Ho aggiornato il mio violino: http://jsfiddle.net/c5aTe/2/ - è possibile utilizzare la pseudo classe :focus per mantenere l'elemento in stile come valido mentre l'utente sta digitando. Questo sarà ancora evidenziare in rosso se il contenuto non è valida quando la voce non è più attivo, ma penso che c'è solo così tanto si può fare con il comportamento progettato ...

HTH :)


EDIT dopo accettazione:

Sintesi di esempi su richiesta di OP (notare i primi due sono stati progettati solo per FF4 - non Chrome)

  1. Fix per FF la convalida segnaposto testo: http://jsfiddle.net/c5aTe/
  2. Fix per FF la convalida durante la digitazione: http://jsfiddle.net/c5aTe/2
  3. JS soluzione alterna stili/validazione: http://jsfiddle.net/c5aTe/4
  0

grande passo avanti, ma l'errore "non valido" sembra essere mostrato quando l'utente clicca sul ingresso => ​​quando l'ingresso è vuoto, prima che in realtà scrivere qualcosa. Ma forse quello che voglio è un bug in FF4 che non può essere risolto:/ 31 mag. 112011-05-31 15:51:57

  0

Ma +1 per il vostro modo di limitare l'orribile rosso scatola ombra :) 31 mag. 112011-05-31 15:52:52

  0

Non credo che si possa fare questo perché, stranamente, è quasi * troppo * intelligente e convalida al volo. Potresti essere furbo con qualche javascript aggiuntivo che ha aggiunto o rimosso una classe dal modulo al momento dell'invio. Quindi è possibile ignorare qualsiasi evidenziazione di convalida in base alla presenza o meno di quella classe. La cosa bella di questo è che sta ancora usando la validazione nativa, non è così carino richiede js aggiuntivi ...: | 31 mag. 112011-05-31 16:00:36

+1

ha avuto qualche ispirazione mentre preparava la colazione - aggiunta in alto! 01 giu. 112011-06-01 06:38:57

  0

intelligente! : p Ma se dai un'occhiata, hai l'ombra per lo stato originale E l'ombra del riquadro per lo stato non valido. Entrambi sono mostrati. Comincio a credere che questo sia un errore di Mozilla, non hanno pensato allo stato iniziale. Se questo è corretto e nessun altro aggiunge un modo completamente funzionante per farlo, non accetterò la tua risposta, ma ti darò la taglia (spero sia possibile, altrimenti, accetterò la tua risposta). Te lo meriti :) Grazie per il tuo aiuto! 01 giu. 112011-06-01 07:29:22

  0

grazie per il commento :). Solo per controllare - stai guardando il secondo violino? Ricevo solo 1 ombra dopo aver sparpagliato quando viene inserito un contenuto non valido, non durante la digitazione e non prima. Non è possibile visualizzare alcuna ombra predefinita, dovrebbe essere rimossa dalla dichiarazione iniziale della css. Ora sono curioso di sapere perché stiamo vedendo risultati diversi ... Inoltre ho preso in giro una potenziale soluzione javascript (con le funzioni inline sporche) con due esempi: http://jsfiddle.net/c5aTe/4/ 01 giu. 112011-06-01 10:20:32

  0

Beh, io so che il secondo jsfiddle non funzionava per me ... Lo stavo testando su Chrome (vergognimi). Ma questo rivela un altro problema (per un'altra domanda allora): perché il problema è ora su Chrome: p Beh, meritavi la taglia e la risposta accettata visto che ora funziona per FF! Potresti aggiornare la tua risposta con il secondo jsfiddle e l'ultima che hai suggerito, entrambi funzionano alla grande (uno in FF solo, il secondo, usando JS, in entrambi). Potrebbe aiutare gli altri utenti ad avere lo stesso problema. Grazie ancora :) 01 giu. 112011-06-01 10:29:29

  0

(posso solo assegnerà il premio in 56 minuti ... dovrete aspettare;)) 01 giu. 112011-06-01 10:30:00

  0

Woot - ha aggiunto alla mia risposta come lei ha suggerito. :) 01 giu. 112011-06-01 10:54:11

  0

Grazie! 31 minuti rimanenti ...: p 01 giu. 112011-06-01 10:55:22

  0

Ho solo dovuto fare questo: selezionare [richiesto] { box-shadow: nessuno! importante; } 04 gen. 132013-01-04 20:06:04


0

questo ha funzionato bene per me:

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

Il problema qui è che dopo la convalida, l'ombra della casella rimane su nessuno e l'utente non ha alcuna idea di dove si verificano gli errori. Quello che voglio è NON visualizzare il bordo rosso nello stato normale del modulo, ma mostrarlo quando l'utente invia/sfoca il modulo se c'è un errore. 31 mag. 112011-05-31 11:33:24


2

Ecco una soluzione molto semplice che ha lavorato per me.Io fondamentalmente cambiato il brutto rosso in un bel blu, che è il colore standard per i campi non richiesti, e una convenzione web:

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

24

Come di Firefox 26, l'attuale CSS utilizzato per identificare validi campi richiesta è come segue (viene da forms.css):

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

di replicarsi in altri browser, io uso:

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

ho suonato in giro con le impostazioni dei pixel, ma non avrei mai immaginato l'1. 5px senza guardare la fonte moz.

Per disattivarlo, è possibile utilizzare:

input:invalid { 
    box-shadow: none; 
} 

0

Si prega di provare questo,

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

per il modulo nel file .js globale o nella sezione di intestazione.