sábado, maio 19, 2007

Validação de formulários via Javascript + DOM

Olá pessoal.

Decidi estudar uma nova forma de validação de campos obrigatórios em formulários. Em todo lugar vemos grandes funções que fazem o trabalho de maneira repetida e braçal. Usando javascript e DOM cheguei a uma função genérica, que recebe um formulário como parâmetro e percorre campo a campo testando se ele é obrigatório ou não. Mas como a função vai saber se o campo é obrigatório?

O HTML é uma linguagem de marcação, com tags já definidas (input , por exemplo) e com atributos definidos para essas tags. Pensei então: por quê não adicionar mais um atributo a essas tags. Esse atributo conteria a informação de obrigatoriedade do campo, e usando DOM, acessaríamos o valor desse novo atributo.

Veja:



< html>
< head>
< title>Validação Genérica via DOM< /title>
< script language="javascript">

function valida(form) {
var elementos = form.elements;
for (var i=0; i< elementos.length; i++){
if (elementos[i].getAttribute("type")=="text") {
if (elementos[i].getAttribute("obrigatorio")=="sim") {
if (elementos[i].value=="") {
alert("O campo "+elementos[i].getAttribute("name")+
" é obrigatorio.");
return false;
}
}
}
}
return true;
}

< /script>
< /head>

< body>
< form onSubmit="return valida(this);">
< input type="text" name="Nome" obrigatorio="sim" />< br/>
< input type="text" name="E-mail" obrigatorio="nao" />< br/>
< input type="submit" name="submit" />
< /form>
< /body>
< /html>




Por equanto é só. Até a próxima e qualquer dúvida quanto ao código, podem comentar.
E não esqueçam de tirar os espaços das tags na hora de testar!

7 comentários:

CACA[COBRA] disse...

Muito bom :D

Vinicius Cruz disse...

Muito bom mesmo! =D

thais disse...

Parabens pelo post... foi mtu util.. pesquisei tanto na net pra fazer um assim, (menos complicado).. e soh tinha encontrado aqueles cheio de complicações e codigos.... Vlw msm....

Anônimo disse...

Já tentou utilizar com campos do tipo select checbox e radio?

Anônimo disse...

Excelente Bruno, obrigado por postar, eu estava procurando exatamente isso. Eu só acrescentei a linha elementos[i].focus(); logo abaixo do alert para dar focus no campo. Obrigado novamente.

Claiton disse...

Muito bom, mas não funciona o Firefox...

Anônimo disse...

Muito bom o post !