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:
Muito bom :D
Muito bom mesmo! =D
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....
Já tentou utilizar com campos do tipo select checbox e radio?
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.
Muito bom, mas não funciona o Firefox...
Muito bom o post !
Postar um comentário