19 de fev de 2014

Mensagem de erro no Onblur de um input

Neste tutorial, explicarei (ou pelo menos tentarei) como fazer uma mensagem de erro ao dar um onblur num campo de um formulário, caso aquele campo não esteja preenchido.

Um exemplo disso, você pode ver aqui.

1- Primeiramente, vamos ao básico, nosso html... Segue abaixo o html, sem segredo nenhum.
Atente-se aos comentários, toda a explicação está neles.

Nome: 
E-mail:
2- Agora, vamos dar um pouco de estilo para nosso código, adicionando o CSS:

body{
 font-family:sans-serif;
 font-size:16px;
}
/* Abaixo, estilo da mensagem de erro, que só aparecerá quando o foco do campo for trocado sem algum preenchimento */
.msg-erro{
 color:#ff0000;
 font-size:12px;
 font-style:italic;
}

3- Por fim, o mais complicado, o javascript. Mais uma vez, veja os comentários no código, toda a explicação do funcionamento está dentro dele!

/* A função validarCampoVazio é aplicada apenas ao campo em que foi trocado o foco, isso por causa do parâmetro 'this' 
que está na chamada de função do input. Ela aplicará o textoErro no segundo parâmetro, no lugar do 'document.getElementById('id da span abaixo do input') */

function validarCampoVazio(campo, textoErro){
 // veja se o campo possui algum texto
 if (campo.value.length == 0) {
 /* caso o campo esteja em branco, uma mensagem de erro será exibida, primeiro verificamos se existe um parâmetro para a mensagem de erro, neste caso estamos usando textoErro */
 if (textoErro != null)
 textoErro.innerHTML = "por favor, preencha este campo."; // o innerHTML irá inserir esta mensagem dentro do span que fica abaixo do input
 return false;
 }
 else {
 /* o campo está preenchido, a mensagem de erro será apagada, novamente verificamos se o parâmetro para a mensagem de erro existe, e deixamos seu valor vazio, através do "" */
 if (textoErro != null)
 textoErro.innerHTML = ""; // o innerHTML apagará qualquer texto do span que fica abaixo do input
 return true;
 }
}


Nenhum comentário:

Postar um comentário