Blog AWS

Validador de campo obrigatório

Escrito por Sandro Silva em 19-Fev-2008.
Neste pequeno tutorial, será demonstrado o uso do JavaScript para validar campos de preenchimento obrigatório em um formulário, destacando os campos obrigatório em vermelho.O código JavaScript

Basicamente, o código JavaScript lê todos os campos do formulário, identifica quais campos são obrigatórios, verifica se estão em branco e caso positivo coloca em vermelho a legenda e o fundo do campo.

O código é o seguinte:

<script language=”JavaScript”>
function validaCampoObrigatorio(form){
var erro=0;
var legenda;
var obrigatorio;
for (i=0;i<form.length;i++){
obrigatorio = form[i].lang;
if (obrigatorio==1){
if (form[i].value == “”){
var nome = form[i].name;
mudarCorCampo(form[i], ‘red’);
legenda=document.getElementById(nome);
legenda.style.color=”red”;
erro++;
}
}
}
if(erro>=1){
alert(“Existe(m) ” + erro + ” campo(s) obrigatório(s) vazio(s)! “)
return false;
} else
return true;
}

function mudarCorCampo(elemento, cor){
elemento.style.backgroundColor=cor;
}
</script>

A função validaCampoObrigatorio(form), pega o formulário que será validado, lê todos os campos do formulário (for (i=0;i<form.length;i++)), se for obrigatório (if (obrigatorio==1)) verifica se esta em branco (if (form[i].value == “”)), caso positivo troca a cor do campo para vermelho (mudarCorCampo(form[i], ‘red’)).

A função mudarCorCampo(elemento, cor) é utilizada para mudar a cor do campo para vermelho e também para branco, quando o usuário estiver corrigindo o campo.

O Formulário

Para que o JavaScript funcione o formulário tem seguir o modelo abaixo:

<form method=”post” action=”” onSubmit=”return validaCampoObrigatorio(this)”>
<samp id=”Dia”>*Dia: </samp>
<input type=”text” lang=”1″ name=”Dia” onFocus=”mudarCorCampo(this,’white’)”>
<br>
<samp id=”Local”>*Local: </samp>
<input type=”text” lang=”1″ name=”Local” onFocus=”mudarCorCampo(this,’white’)”>
<br>
<samp id=”Hora”>Hora: </samp>
<input type=”text” lang=”0″ name=”Hora” onFocus=”mudarCorCampo(this,’white’)”>
<input type=”submit” name=”button” id=”button” value=”OK” /><br>
*campos obrigatotios
</form>

A função principal do JavaScript fica em onSubmit, na tag form. Ela diz para o sistema que antes de enviar o formulário os campos devem ser validados.

Para que as legendas mudem de cor é necessário usar a tag samp com id igual ao name do input. Ex: <samp id=”Hora”>…<input name=”Hora” …>. O comando que determina que um campo é obrigatório ou não é o lang, quando ele esta com 1 é obrigatório, quando é 0 não é. Além do lang é necessário o comando onFocus que faz os campos em vermelho mudarem para branco quando o usuário esta corrigindo os dados.

Fonte: http://www.fabsoft.cesupa.br/site/index.php?option=com_content&task=view&id=39&Itemid=34

Deixe seu comentário

Nome (Requerido)

E-mail (Requerido - não será publicado)

URL do seu Website (caso tenha)

Mensagem (Requerido)