No artigo anterior, Javascript e eventos, expliquei a importância dos eventos para as linguagens client-side. Ter conhecimento dos eventos é fundamental para programar em Javascript.
Nesse artigo, pretendo colocar em prática o conhecimento adquirido sobre eventos. Dessa forma, o aprendizado torna-se mais fácil. Note que a leitura do artigo anterior é recomendável para facilitar o entendimento nesse artigo.
Utilizaremos o evento onsubmit para saber quando o formulário está sendo enviado. Muitas pessoas utilizam o evento onclick do botão de envio, mas isso não é recomendável (não explicarei o motivo nesse artigo).
O código da nossa página, apenas para fins didáticos, pode ficar assim:
À princípio, poderíamos fazer uma validação com os elementos obtendo-os um a um a partir de seu atributo id. Nesse caso, nosso código poderia ficar assim:
onload = function () {
document.getElementById("formulario").onsubmit = function () {
if (document.getElementById("nome").value == "") {
alert("Digite um nome !")
return false
} else if (document.getElementById("sobrenome").value == "") {
alert("Digite um sobrenome !")
return false
} else if (document.getElementById("pais").value == "invalido") {
alert("Digite um país !")
return false
}
}
}
Nota:
- Para obter o atributo value de um elemento, podemos utilizar a propriedade value (sério ??);
- Ao retornar false para um evento (return false), o navegador não executa a ação padrão do evento (no nosso caso, enviar o formulário). É como se aquilo não tivesse acontecido.
No código continuaríamos com o if…else if para todos os elementos do formulário. No mínimo, trabalhoso.
Felizmente, há outros recursos. Podemos utilizar o método getElementsByTagName do formulário, que retorna um array com todos os filhos do objeto cuja tag é igual à especificada como parâmetro.
Por exemplo, document.body.getElementsByTagName(“form”) irá retornar todos os formulários (<form>) da página.
Para quem não sabe o que é um array, recomendo a leitura desse artigo: CriarWeb – Arrays em Javascript.
Poderíamos, então, aplicar essa técnica em nossa validação. O código ficaria parecido com esse:
document.getElementById("formulario").onsubmit = function () {
var campos = this.getElementsByTagName("input")
for (var i = 0; i < campos.length; i++) {
if (campos[i].value == "") {
alert("Preencha todos os campos de texto")
return false
}
}
}
Notas:
- O objeto this, quando utilizado em eventos, é o próprio elemento que sofreu a ação;
- Em array’s, a propriedade length pode ser utilizada para obter a quantidade de elementos.
O código ficou muito mais elegante, não ?
Mas nos esquecemos de validar os elementos <select>. Por ironia do destino e para complicar a validação, esses são inválidos quando seu valor é “invalido”, enquanto os <input> devem ter valor diferente de “”.
Ah, basta repetir o código e fazer pequenas alterações… Definitivamente não !
Podemos muito bem criar uma função que faça isso por nós e reutilizar o código.
Eis o código da função:
function ValidaElementos(campos, valor_invalido) {
for (var i=0;i
Nota:
O argumento valor_invalido nos será útil porque o critério para validação dos input’s e select’s é diferente.
E o código para o evento onload pode ficar assim:
onload = function () {
document.getElementById("formulario").onsubmit = function () {
if (!ValidaElementos(this.getElementsByTagName("input"), "")) {
alert("Preencha todos os campos de texto")
return false;
}
if (!ValidaElementos(this.getElementsByTagName("select"), "invalido")) {
alert("Preencha todos os combos");
return false;
}
}
}
Nota:
O operador ! (negação lógica) serve para inverter o valor de uma variável. Note que a função ValidaElementos retorna false (falso) no caso de a validação falhar, mas uma condição if só é executada se o resultado da operação for true (verdadeiro). Podemos, então, inverter o resultado com o operador !.
Para quem quiser, fica aí o código completo de nossa página:
Espero, em artigos futuros, ensinar a criar validações mais complexas e explicar o porquê de se utilizar o evento onsubmit do formulário ao invés do onclick de botões.
2 Replies to “Validação de formulário simples”