Firefox 4: ¿Hay alguna manera de eliminar el borde rojo en una entrada de formulario requerida?

85

Cuando se define obligatorio en un campo de formulario, Firefox 4 muestra automáticamente un borde rojo en este elemento, incluso ANTES de que el usuario presione el botón enviar.

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

Creo que esto es perturbador para el usuario, ya que no cometió errores al principio.

Quiero ocultar ese borde rojo para el estado inicial, pero lo mostraré cuando el usuario presione el botón enviar si falta un campo marcado como requerido.

Miré :requiredy :invaliddesde un nuevo pseudo selector, pero los cambios son para antes Y después de la validación. (de Firefox 4 Formulario de entrada obligatorio Borde / contorno ROJO )

¿Hay alguna forma de deshabilitar el borde rojo antes de que el usuario envíe el formulario y mostrarlo si faltan algunos campos?

Cyril N.
fuente
1
¿Qué tal el esquema: 0; ?
Ace

Respuestas:

150

Esto fue un poco complicado, pero configuré este ejemplo: http://jsfiddle.net/c5aTe/ que me funciona. Básicamente, el truco parece ser evitar tener un texto de marcador de posición que no es válido. De lo contrario, debería poder hacer esto:

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

o algo similar...

PERO como FF4 decide validar su texto de marcador de posición (no tengo idea de por qué ... !important) se requiere la solución en el violín (pequeño hacky - usos ).

¡Espero que ayude!

EDITAR

Doh !! - Me siento bien tonto. Actualicé mi violín: http://jsfiddle.net/c5aTe/2/ : puede usar la :focuspseudoclase para mantener el estilo del elemento como si fuera válido mientras el usuario está escribiendo. Esto aún se resaltará en rojo si el contenido no es válido cuando el elemento pierde el foco, pero creo que hay mucho que puede hacer con el comportamiento diseñado ...

HTH :)


EDITAR después de la aceptación:

Resumen de ejemplos a pedido de OP (tenga en cuenta que los dos primeros solo están diseñados para FF4, no para Chrome )

  1. Corrección para FF que valida el texto del marcador de posición : http://jsfiddle.net/c5aTe/
  2. Corrección para la validación de FF mientras escribe: http://jsfiddle.net/c5aTe/2
  3. Solución JS para alternar estilos / validación: http://jsfiddle.net/c5aTe/4
Stuart Burrows
fuente
Gran avance, pero el error "no válido" parece mostrarse cuando el usuario hace clic en la entrada => cuando la entrada está vacía, ANTES de que realmente escriba algo. Pero tal vez lo que quiero es un error en FF4 que no se puede resolver: /
Cyril N.
Pero +1 por tu forma de limitar la horrible sombra del cuadro rojo :)
Cyril N.
No crea que puede hacer esto porque, extrañamente, es casi demasiado inteligente y se valida sobre la marcha. Podría ser inteligente con algún javascript adicional que agregue o elimine una clase del formulario cuando se envía. Luego, podría anular cualquier resaltado de validación en función de que esa clase esté presente o no. Lo bueno de esto es que todavía está usando la validación nativa, no es tan bueno que requiere js adicionales ...: |
Stuart Burrows
1
tuvo algo de inspiración mientras preparaba el desayuno, ¡agregado arriba!
Stuart Burrows
¡Inteligente! : p Pero si echas un vistazo, tienes la sombra para el estado original Y la sombra del cuadro para el estado no válido. Se muestran ambos. Empiezo a creer que esto es un error de Mozilla, no pensaron en el estado inicial. Si esto es correcto y nadie más agrega una forma que funcione completamente para hacerlo, no aceptaré su respuesta, pero le daré la recompensa (espero que esto sea posible, si no, aceptaré su respuesta). Te lo mereces :) ¡Gracias por tu ayuda!
Cyril N.
38

A partir de Firefox 26, el CSS real que se utiliza para identificar los campos obligatorios no válidos es el siguiente (proviene de forms.css):

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

Para replicar en otros navegadores, uso:

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

Jugué con la configuración de píxeles, pero nunca hubiera adivinado el 1.5px sin mirar la fuente moz.

Para deshabilitarlo, puede usar:

input:invalid {
    box-shadow: none;
}
Dan
fuente
Pequeña precisión: debe ser :not(output):-moz-ui-invalidno input:not(output):-moz-ui-invalidpara aquellos que intentó gusta esto.
Skoua
Eres una leyenda absoluta.
abejdaniels
2

Aquí hay una solución muy fácil que funcionó para mí. Básicamente, cambié el rojo feo a un azul muy agradable, que es el color estándar para los campos no obligatorios, y una convención web:

:required {
    border-color: rgba(82, 168, 236, 0.8);
}
Randy maíz verde
fuente
1

Esto funcionó bien para mí:

input:invalid {
     -moz-box-shadow: none;
}
WVDominick
fuente
7
El problema aquí es que después de la validación, la sombra del cuadro permanece en cero y el usuario no tiene ni idea de dónde ocurren los errores. Lo que quiero es NO mostrar el borde rojo en el estado normal del formulario, sino mostrarlo cuando el usuario envía / desenfoca el formulario si hay un error.
Cyril N.
1

Tratar:

document.getElementById('myform').reset();
Andriy
fuente
0

Por favor intente esto,

$ ("formulario"). attr ("novalidate", verdadero);

para su formulario en su archivo .js global o en la sección de encabezado.

Anoop Velluva
fuente