3

Galera, tenho o seguinte formulário:

<!DOCTYPE html>
<html>
<body>
<form action="enviar.php" method="post" accept-charset="utf-8">
<label>Nome<br> 
    <input type="text" pattern="^[a-zA-Zà-úÀ-Ú ]{2,30}$" autocomplete="off" title="Somente letras e acentos são permitidos. Até 30 caracteres." name="nome" maxlength="30" required autofocus/>
</label>
<label>Sobrenome<br> 
    <input type="text" pattern="^[a-zA-Zà-úÀ-Ú ]{2,40}$" autocomplete="off" title="Apenas letras, acentos e espaços são permitidos. Até 50 caracteres." name="sob" maxlength="50" required/>
</label>

...

</form>
</body>
</html>

E assim o formulário continua, outros campos e o botão de submit.

Queria saber como pegar o valor que o pattern retornou, para quando a entrada do usuário estiver certa nada acontecer, mas se estiver errada, mudar a cor de fundo e a borda do campo que a entrada está errada, pelo evento change() mesmo, sem submeter a página. Mudar os atributos CSS eu sei, mas como pegar o valor que da expressão regular não.

Estou trabalhando com JQuery mesmo.

3 Respostas 3

5

Em browsers com o devido suporte, você resolve isso por CSS:

input:invalid {
    background: red;
    color: white;
}

http://jsfiddle.net/007go6vu/

4
  • 1
    E, caso mais alguma coisa tenha que ser feita via código, basta verificar acessar a propriedade validity.valid dos inputs: true significa válido; false, inválido. Commented 27/08/2014 às 19:29
  • Legal @RuiPimentel, eu não sabia dessa.
    – bfavaretto
    Commented 27/08/2014 às 19:31
  • muito legal essa, não fazia a menor ideia. O único problema é que os campos, eles iniciam após o carregamento, teoricamente invalidos, em questão de aparência não fica muito legal Commented 27/08/2014 às 19:32
  • @leandro17br Mas acho que isso daria pra resolver na regex, não?
    – bfavaretto
    Commented 27/08/2014 às 19:33
2

Acho que é mais ou menos isso:

$(':text').change(function() {
   var pattern = $('[name=nome]').attr('pattern');
   var str     = $(this).val();
   var retorno = str.match(pattern); // retorna a resposta do match...
});

Aí é só fazer com os outros inputs também.

Tendo o valor da variável retorno você pode mudar o CSS do input.

2

Complementando a resposta do @bfavaretto, para garantir que o formulário não acuse erro de preenchimento logo na inicialização, você pode usar outro método. Um pequeno CSS em conjunto com um Javascript+jQuery basta:

.invalido { background: red; color: white; }

Script:

$("input").keyup(function(){
    if(this.validity.valid){
        this.className = "valido";
    } else {
        this.className = "invalido";
    }
});

Edit: como sempre, esqueci do JSFiddle.

Edit 2: para que ele acuse erro caso o formulário esteja em branco, é necessário que o atributo required seja declarado no <input />.

1
  • muito bom mesmo, vlw Commented 27/08/2014 às 20:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .