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 mudarCorCampo(elemento, cor){ 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)”> 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 |