Firefox 4: existe uma maneira de remover a borda vermelha em uma entrada de formulário necessária?


86

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?


1
Que tal esboço: 0; ?
Ás de

Respostas:


154

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

Grande avanço, mas o erro "inválido" parece ser mostrado quando o usuário clica na entrada => quando a entrada está vazia, ANTES de realmente escrever algo. Mas talvez o que eu queira é um bug no FF4 que não pode ser resolvido: /
Cyril N.

Mas +1 para sua maneira de limitar a horrível sombra da caixa vermelha :)
Cyril N.

Não pense que você pode fazer isso porque, estranhamente, é quase muito inteligente e valida na hora. Você pode ser inteligente com algum javascript adicional que adiciona ou remove uma classe do formulário quando ele é enviado. Então você pode substituir qualquer destaque de validação com base na classe presente ou não. O bom sobre isso é que ainda está usando a validação nativa, não tão legal está exigindo js adicional ...: |
Stuart Burrows

1
tive alguma inspiração enquanto preparava o café da manhã - adicionado acima!
Stuart Burrows

Esperto! : p Mas se você der uma olhada, você tem a sombra para o estado original E a sombra da caixa para o estado inválido. Ambos são mostrados. Começo a acreditar que isso é um erro da Mozilla, eles não pensaram no estado inicial. Se isso estiver correto e ninguém mais adicionar uma maneira funcional de fazer isso, não aceitarei sua resposta, mas darei a recompensa (espero que seja possível, caso contrário, aceitarei sua resposta). Você merece :) Obrigado pela ajuda!
Cyril N.

38

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

Pequeno precisão: ela deve ser :not(output):-moz-ui-invalidnão input:not(output):-moz-ui-invalidpara aqueles que tentou gostou disso.
Skoua

Você é uma lenda absoluta.
abejdaniels de

3

Experimentar:

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

Esta deve ser a resposta aceita. O Firefox (e a maioria dos navegadores que testei) não marcará um campo de entrada como inválido quando o usuário nem mesmo inserir nada. Não deve ser um problema. Suspeito que o autor da pergunta está fazendo a mesma coisa que eu, reutilizando um formulário em um aplicativo de página única. A redefinição do formulário limpa todas as bordas vermelhas de entrada inválida.
Daniel Wu

2

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

1

Isto funcionou bem para mim:

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

7
O problema aqui é que após a validação, a sombra da caixa permanece sem nenhuma e o usuário não tem ideia de onde os erros ocorrem. O que eu quero é NÃO exibir a borda vermelha no estado normal do formulário, mas mostrá-la quando o usuário enviar / desfocar o formulário se houver um erro.
Cyril N.

0

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.


0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.