Quando necessário é definido em um campo de formulário, o Firefox 4 mostra automaticamente uma borda vermelha para este elemento, mesmo ANTES de o usuário clicar no botão enviar.

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

Acho que isso é preocupante para o usuário, pois ele não cometeu erros no início.

Eu quero ocultar essa borda vermelha para o estado inicial, mas mostrá-la quando o usuário clicar no botão enviar, se houver um campo ausente marcado como obrigatório.

Eu olhei para :requirede :invaliddo novo pseudo seletor, mas as mudanças são para antes E depois da validação. (do Firefox 4 Formulário de entrada obrigatório borda / contorno VERMELHO )

Existe uma maneira de desativar a borda vermelha antes de o usuário enviar o formulário e mostrá-la se houver alguns campos ausentes?

Isso foi um pouco complicado, mas criei este exemplo: http://jsfiddle.net/c5aTe/ que está funcionando para mim. Basicamente, o truque parece ser contornar o texto de espaço reservado que é inválido. Caso contrário, você deve ser capaz de fazer o seguinte:

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

ou algo parecido ...

MAS desde que FF4 decide validar seu texto de espaço reservado (não tenho ideia por que ...) a solução no fiddle (pequeno hacky - usa!important ) é necessária.

Espero que ajude!

EDITAR

Doh !! - Eu me sinto bem bobo. Eu atualizei meu violino: http://jsfiddle.net/c5aTe/2/ - você pode usar o:focus pseudo classe para manter o estilo do elemento como válido enquanto o usuário está digitando. Isso ainda será destacado em vermelho se o conteúdo for inválido quando o item perder o foco, mas acho que há muito que você pode fazer com o comportamento projetado ...

HTH :)

EDITAR após aceitação:

Resumo dos exemplos a pedido do OP (observe que os dois primeiros são projetados apenas para FF4 - não para Chrome )

1. Correção para FF validando o texto do marcador de posição : http://jsfiddle.net/c5aTe/
2. Correção para validação de FF conforme você digita: http://jsfiddle.net/c5aTe/2
3. Solução JS alternando estilos / validação: http://jsfiddle.net/c5aTe/4

No Firefox 26, o CSS real usado para identificar campos obrigatórios inválidos é o seguinte (vem de forms.css):

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

Para replicar em outros navegadores, eu uso:

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

Eu brinquei com as configurações de pixel, mas nunca teria adivinhado 1.5px sem olhar para a fonte moz.

Para desativá-lo, você pode usar:

input:invalid {
    box-shadow: none;
}

Experimentar:

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

Aqui está uma solução muito fácil que funcionou para mim. Basicamente, mudei o vermelho feio para um azul muito bonito, que é a cor padrão para campos não obrigatórios e uma convenção da web:

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

Isto funcionou bem para mim:

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

Por favor, tente isso,

$ ("formulário"). attr ("novalidate", verdadeiro);

para o seu formulário no arquivo .js global ou na seção de cabeçalho.

Uma maneira que descobri de pelo menos consertar principalmente o problema é:

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

Dessa forma, o campo de entrada começa com aquele belo contorno azul, mas quando o usuário insere um caractere, ele é definido como obrigatório (se você inserir um caractere e retroceder, a borda vermelha estará lá). Nesse caso, é possível que um usuário ignore a entrada, portanto, certifique-se de colocar a validação de back-end no lugar se fizer isso.