Muitas vezes precisamos validar formulários em Java script e raramente aproveitamos o código, mais graças ao Jquery descobri uma forma simples de validar os campos obrigatórios.
“Estrutura do HTML”
<form>
<label for=”nome”>Nome</label>
<input type=”text” id=”nome” name=”nome” value=”" class=”required”>
<label for=”email”>E-mail</label>
<input type=”text” id=”email” name=”email” value=”" class=”required”>
<label for=”senha”>Senha</label>
<input type=”password” id=”senha” name=”senha” value=”" class=”required”>
<input type=”button” id=”btnCadastrar” name=”btnCadastrar” value=”Cadastrar”>
</form>
Em cada INPUT acrescentei um classe required, ela representa que ele é um campo obrigatório.
<input type=”text” id=”nome” name=”nome” value=”" class=”required”>
Java Script
Dentro da tag HEAD acrescentei o codigo abaixo
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#btnCadastrar”).click(function(){
$(“.required”).each(function(){
if($(this).val()==”"){
alert(“Campo obrigatório!”);
$(this).focus();
return false;
}
});
});
});
</script>
</head>
“Descrevendo o código”
Quando o botão Cadastrar for clicado ele vai disparar uma função, a função vai percorrer os elementos que tiver a classe “required” e vai verificar se existe algum elemento que contem um campo vazio, caso ela encontre, vai exibir um alerta e vai adicionar o foco para o campo que se encontra vazio .
“Segue abaixo o código completo, lembrando que é apenas um exemplo da simplicidade do Jquery podemos desenvolver várias formas para melhorar a função demonstrada nesse tutorial, sem mais delongas boa sorte .. ”
<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>
<title>Jquery </title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#btnCadastrar”).click(function(){
$(“.required”).each(function(){
if($(this).val()==”"){
alert(“Campo obrigatório!”);
$(this).focus();
return false;
}
});
});
});
</script>
</head>
<body>
<form>
<label for=”nome”>Nome</label>
<input type=”text” id=”nome” name=”nome” value=”" class=”required”>
<label for=”email”>E-mail</label>
<input type=”text” id=”email” name=”email” value=”" class=”required”>
<label for=”senha”>Senha</label>
<input type=”password” id=”senha” name=”senha” value=”" class=”required”>
<input type=”button” id=”btnCadastrar” name=”btnCadastrar” value=”Cadastrar”>
</form>
</body>
</html>
Nenhum comentário:
Postar um comentário