Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop

Validando campos de um formulário com a Jquey e a biblioteca validate.

Em outras postagens mostrei como validar os campos em PHP (o que é bastante seguro), porém e se eu quiser colocar uma dupla validação e avisar antes do envio para o usuário quais são os campos obrigatórios e que devem ser preenchidos corretamente?

É nesse ponto que entrar o jquery.

Nessa postagem vou mostrar como fazer uma simples validação dos campos antes dos envios.

Vamos lá, primeiro crio um arquivo HTML normal com um formulário de cadastro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validação de campos com Jquery</title>
</head>

<body>
<form id="cadastro" method="post" action="#">
    <ul>
        <li>
            <label for="nome">Nome</label>
            <input type="text" id="nome" name="nome" />
        </li>
        <li>
            <label for="email">Email</label>
            <input type="text" id="email" name="email" />
        </li>
        <li>
            <label for="sexo">Sexo</label>
            Feminino <input type="radio" name="sexo" value="f" />
            Masculino <input type="radio" name="sexo" value="m" />
        </li>    
        <li>
            <label for="endereco">Endereço</label>
            <input type="text" id="endereco" name="endereco" />
        </li>
        <li>
            <label for="numero">Numero</label>
            <input type="text" id="numero" name="numero" />
        </li>
        <li>
            <label for="cidade">Cidade</label>
            <input type="text" id="cidade" name="cidade" />
        </li>
        <li>
            <label for="estado">Estado</label>
                <select name="estado">
                <option value="">Selecione o Estado</option>
                <option value="ac">Acre</option>
                <option value="al">Alagoas</option>
                <option value="ap">Amapá</option>
                <option value="am">Amazonas</option>
                <option value="ba">Bahia</option>
                <option value="ce">Ceará</option>
                <option value="df">Distrito Federal</option>
                <option value="es">Espirito Santo</option>
                <option value="go">Goiás</option>
                <option value="ma">Maranhão</option>
                <option value="ms">Mato Grosso do Sul</option>
                <option value="mt">Mato Grosso</option>
                <option value="mg">Minas Gerais</option>
                <option value="pa">Pará</option>
                <option value="pb">Paraíba</option>
                <option value="pr">Paraná</option>
                <option value="pe">Pernambuco</option>
                <option value="pi">Piauí</option>
                <option value="rj">Rio de Janeiro</option>
                <option value="rn">Rio Grande do Norte</option>
                <option value="rs">Rio Grande do Sul</option>
                <option value="ro">Rondônia</option>
                <option value="rr">Roraima</option>
                <option value="sc">Santa Catarina</option>
                <option value="sp">São Paulo</option>
                <option value="se">Sergipe</option>
                <option value="to">Tocantins</option>
            </select>        
        </li>
        <li>
            <input type="submit" id="enviar" value="Gravar" />
        </li>                    
    </ul>
</form><!-- #cadastro -->
</body>
</html>

Para deixar com um visual melhor o formulário, eu irei adicionar esses estilos em CSS:

<style type="text/css">
body {
	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#cadastro {
	float: left;
	display: block;	
}
#cadastro ul {
	list-style: none;	
}
#cadastro li {
	display: block;
	margin-bottom: 10px;	
}
#cadastro label {
	display: block;
	margin-bottom: 5px;	
}
#cadastro input[type=text],
#cadastro select {
	line-height: 30px;
	width: 250px;
	height: 30px;
	display: block;
	border: solid 1px #dcdcdc;
	background: #f4f4f4;	
}
#cadastro input[type=submit] {
	width: 100px;
	height: 30px;
	display: block;
	float: left;
	cursor: pointer;
	background: #b7e8fa;
	text-transform: uppercase;
	border: solid 1px #79d4f6;
}
#cadastro input[type=submit]:hover {
	color: #FFF;
	background: #63b2cf;	
}
</style>

Agora vamos às instruções de como aplicar o funcionamento da biblioteca validate.

O primeiro passo é incluir (carregar) o jquery que pode ser realizado de duas formas:

  1. Fazendo o download (recomendado) do arquivo através desse link e então fazer o upload do arquivo no servidor onde está hospedado o arquivo e então “chamar” o arquivo através da seguinte linha:
    <script type="text/javascript" src="js/jquery.js"></script>
    

IMPORANTE: Essa linha deve estar antes do fechamento da tag </head> para que seja carregando junto com o cabeçalho da página.

  1. Utilizar o arquivo a partir de um link externo, no qual o arquivo já está hospedado, como pode exemplo, através do link:
    <script src="//code.jquery.com/jquery-1.11.2.min.js"</script>
    

O segundo passo é quase igual ao primeiro, devemos fazer o download da biblioteca validate através do link: http://jqueryvalidation.org/files/jquery-validation-1.13.1.zip

Carrega-lo logo após o carregamento do Jquery:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

Depois eu preciso indicar quais são os campos obrigatórios colocando neles uma classe desenvolvida na biblioteca, acompanhe na alteração abaixo:

<form id="cadastro" method="post" action="#">
    <ul>
        <li>
            <label for="nome">Nome</label>
            <input class="required" type="text" id="nome" name="nome" />
        </li>
        <li>
            <label for="email">Email</label>
            <input class="required email" type="text" id="email" name="email" />
        </li>
        <li>
            <label for="sexo">Sexo</label>
            Feminino <input class="required" type="radio" name="sexo" value="f" />
            Masculino <input class="required" type="radio" name="sexo" value="m" />
        </li>    
        <li>
            <label for="endereco">Endereço</label>
            <input class="required" type="text" id="endereco" name="endereco" />
        </li>
        <li>
            <label for="numero">Numero</label>
            <input class="required" type="text" id="numero" name="numero" />
        </li>
        <li>
            <label for="cidade">Cidade</label>
            <input class="required" type="text" id="cidade" name="cidade" />
        </li>
        <li>
            <label for="estado">Estado</label>
                <select class="required" name="estado">
                <option value="">Selecione o Estado</option>
                <option value="ac">Acre</option>
                <option value="al">Alagoas</option>
                <option value="ap">Amapá</option>
                <option value="am">Amazonas</option>
                <option value="ba">Bahia</option>
                <option value="ce">Ceará</option>
                <option value="df">Distrito Federal</option>
                <option value="es">Espirito Santo</option>
                <option value="go">Goiás</option>
                <option value="ma">Maranhão</option>
                <option value="ms">Mato Grosso do Sul</option>
                <option value="mt">Mato Grosso</option>
                <option value="mg">Minas Gerais</option>
                <option value="pa">Pará</option>
                <option value="pb">Paraíba</option>
                <option value="pr">Paraná</option>
                <option value="pe">Pernambuco</option>
                <option value="pi">Piauí</option>
                <option value="rj">Rio de Janeiro</option>
                <option value="rn">Rio Grande do Norte</option>
                <option value="rs">Rio Grande do Sul</option>
                <option value="ro">Rondônia</option>
                <option value="rr">Roraima</option>
                <option value="sc">Santa Catarina</option>
                <option value="sp">São Paulo</option>
                <option value="se">Sergipe</option>
                <option value="to">Tocantins</option>
            </select>        
        </li>
        <li>
            <input type="submit" id="enviar" value="Gravar" />
        </li>                    
    </ul>
</form><!-- #cadastro -->

Veja que eu adicione nos campos a classe “required” e no caso do email eu também adicionei a classe “email” para que seja validado como um email verdadeiro.

Agora no fim da página, antes de fechar a tag </body>, irei adicionar o seguinte script:

<script type="text/javascript">
$("#cadastro").validate({
	submitHandler: function(form) {
		form.submit();
	}
});
</script>

E pronto? Esse será o resultado ao tentar enviar o formulário sem o correto preenchimento dos campos:

Tela do resultado do teste de validação com jqueryPara melhorar a forma como deverá aparecer para o usuário final, vamos adicionar algumas configurações, primeiro no css:

#cadastro input[type=text].error,
#cadastro select.error,
#cadastro input[type=radio].error {
	border: solid 1px #900;	
}
label.error {
	font-size: 12px;
	color: #900;	
}

 

E agora no script do validate para que a mensagem de erro seja exibida de forma mais coerente para o usuário entender:

<script type="text/javascript">
$("#cadastro").validate({
	submitHandler: function(form) {
		/* SE TUDO ESTIVER OK, ENVIO O FORMULÁRIO */
		form.submit();
	},
	messages : {
		/* ESPECIFICO ALTERAÇÃO SOMENTE PARA O EMAIL */
		email: {
			required: 'Esse campo é obrigatório',
			email: 'Preencha com um email válido' 	
		}
	}
});
/* ALTERO A FRASE DE TODOS OS CAMPOS */
$.validator.messages.required = 'Esse campo é obrigatório';
</script>

Agora sim, temos um resultado melhor:

Tela do resultado de teste com alterações de formataçãoNOTA:  Essa validação não substitui de forma nenhuma uma validação utilizando uma linguagem de programação no lado servidor, apenas auxilia como aviso para o usuário final.

Se quiser os arquivos dessa postagem, pode fazer o download aqui:

Arquivos ZIP

fev 4, 2015Rodrigo Sarri
Manipulação de imagens em php com a biblioteca WideImageRedirecionar para outro endereço com PHP
Comentários: 1
  1. Juliano
    6 years ago

    Olá, muito boa a dica. Parabéns.
    Para alterar as frases eu fiz assim:
    $.validator.messages.required = ‘Esse campo é obrigatório’;
    $.validator.messages.email = ‘Preencha com um e-mail válido’;
    e deu certo!!
    Abraço.

    RespostaCancelar

Deixe uma resposta Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

7 years ago 1 Comentário JQUERY, JSjavascript, jquery, validar campos com jquery, validate
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
PHP função count()
Como contar os itens de uma matriz(array)?
7 years ago
Enviar email utilizando o PHP através da função mail()
Enviar email utilizando o PHP mail()
7 years ago
CSS3 border-radius
CSS Borda arredondada, como utilizar?
7 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital