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

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

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

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

Ho guardato :requirede :invaliddal nuovo pseudo selettore, ma le modifiche sono per prima e dopo la convalida. (da Firefox 4 Modulo di input obbligatorio Bordo / contorno ROSSO )

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

Questo è stato un po 'complicato ma ho impostato questo esempio: http://jsfiddle.net/c5aTe/ che funziona per me. Fondamentalmente il trucco sembra essere quello di aggirare il testo segnaposto che non è valido. Altrimenti dovresti essere in grado di farlo:

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

o qualcosa di simile ...

MA poiché FF4 decide di convalidare il testo segnaposto (non ho idea del perché ...) è richiesta la soluzione nel violino (piccoli usi hacky !important).

Spero possa aiutare!

MODIFICARE

Doh !! - Mi sento bene sciocco. Ho aggiornato il mio violino: http://jsfiddle.net/c5aTe/2/ - puoi usare la :focuspseudo classe per mantenere lo stile dell'elemento come se fosse valido mentre l'utente sta digitando. Questo verrà comunque evidenziato in rosso se il contenuto non è valido quando l'elemento perde il focus, ma penso che ci sia solo così tanto che puoi fare con il comportamento progettato ...

HTH :)

MODIFICA dopo l'accettazione:

Riepilogo degli esempi su richiesta dell'OP (nota che i primi due sono progettati solo per FF4, non per Chrome )

1. Correzione per FF che convalida il testo del segnaposto : http://jsfiddle.net/c5aTe/
2. Correzione della convalida di FF durante la digitazione: http://jsfiddle.net/c5aTe/2
3. Soluzione JS che alterna stili / convalida: http://jsfiddle.net/c5aTe/4

A partire da Firefox 26, il CSS effettivo utilizzato per identificare i campi obbligatori non validi è il seguente (proviene da forms.css):

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

Per replicare in altri browser, utilizzo:

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

Ho giocato con le impostazioni dei pixel ma non avrei mai indovinato 1.5px senza guardare la sorgente moz.

Per disabilitarlo puoi usare:

input:invalid {
    box-shadow: none;
}

Provare:

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

Ecco una soluzione molto semplice che ha funzionato per me. Fondamentalmente ho cambiato il brutto rosso in un blu molto bello, che è il colore standard per i campi non obbligatori e una convenzione web:

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

Questo ha funzionato bene per me:

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

Per favore prova questo,

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

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

Un modo che ho trovato almeno per lo più per risolvere il problema è:

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

In questo modo, il campo di input inizia con quel bel contorno blu, ma una volta che l'utente inserisce un carattere è impostato su obbligatorio (quindi se inserisci un carattere e poi backspace, il bordo rosso è lì). In questo caso è possibile che un utente salti l'input, quindi assicurati di mettere in atto la convalida del backend se lo fai.