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?

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

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;
}

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);
}

Esto funcionó bien para mí:

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

Tratar:

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

Por favor intente esto,

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

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