Neste tutorial, estarei explicando como realizar validações de formulários, antes de enviá-los, usando JavaScript.
A validação de formulários via JavaScript é mais fácil do que muitos imaginam, e tem a vantagem de não sobrecarregar o servidor que receberá o formulário. Na verdade, tudo que tem de ser feito é a inclusão do atributo onsubmit, contendo o texto "return ", seguido do nome da função que realizará a validação. Na função, são capturados os elementos selecionados, através de suas ids ou classes e os mesmos são encaminhados a uma validação, que se resume a comparação de caracteres. No caso de um elemento não passar no teste, é retornado false, o que cancela o envio do formulário, e opcionalmente, realça os elementos que não passaram no teste. Apenas quando todos os elementos passarem no teste, a função irá retornar true e, consequentemente, enviar o formulário.
Veja o exemplo abaixo, onde os elementos escolhidos por id (através de um array de strings passado como parâmetro) passam pelo teste de "formato de data" e são realçados com a cor vermelha, caso não passem no teste:
function validarData(ids)
{
var ok = true;
for (i = 0; i < ids.length; i++)
{
var element = document.getElementById(ids[i]);
with (element) // a estrutura with serve como atalho
{
if (value.length === 10) // element.value.length === 10
{
element.style.color = 'black';
if (
value[0] < '0' || value[0] > '3' ||
(value[0] === '3' && (value[1] < '0' || value[1] > '1')) ||
value[3] < '0' || value[3] > '1' ||
(value[3] === '1' && (value[4] < '0' || value[4] > '2')) ||
value[6] < '0' || value[6] > '9' ||
value[7] < '0' || value[7] > '9' ||
value[8] < '0' || value[8] > '9' ||
value[9] < '0' || value[9] > '9' ||
value[2] !== '/' || value[5] !== '/'
)
{
element.style.color = 'red';
element.style.borderColor = 'red';
ok = false;
}
else
{
element.style.color = 'black';
element.style.borderColor = 'green';
}
}
else
{
element.style.color = 'red';
element.style.borderColor = 'red';
ok = false;
}
}
}
return ok;
}
function validar()
{
var ok = true;
if (validarData(['nasci', 'morte']) === false)
{
ok = false;
}
/* Mais funções podem ser adicionadas como parte do teste */
return ok;
}
Abaixo está o código HTML com o formulário e a chamada da função (em arquivo externo, chamado "validar.js"):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="validar.js"></script>
<title>Validação de formulários</title>
</head>
<body>
<form action="form.php" onsubmit="return validar();" method="post">
<input type="text" id="nasci" name="nasci" placeholder="dd/mm/aaaa" />
<input type="text" id="morte" name="morte" placeholder="dd/mm/aaaa" />
<input type="submit" />
</form>
</body>
</html>
Código PHP que receberá o formulário:
$nasci = $_POST["nasci"];
$morte = $_POST["morte"];
/* ... */
Veja o resultado abaixo (preencha o segundo campo de texto, usando o mesmo formato de data que o primeiro campo):
0 comentários:
Postar um comentário