jQuery Validate: Validando formulários com jQuery

Durante a implementa��o de p�ginas web para que sejam exibidas ao usu�rio, denominado lado cliente ou modo vis�o, � preciso criar regras para que os formul�rios n�o se tornem vulner�veis, quebrando toda a rotina e tratando de uma forma totalmente fora do contexto na quest�o de tipos, transi��es e armazenamento de dados.

Nesse artigo ser�o vistos exemplos diversos em que a p�gina HTML sofrer� mudan�as de acordo com cada comportamento de campo a ser validado em rela��o ao formul�rio. Veremos dois exemplos utilizando JavaScript, jQuery e CSS: um com as mensagens de erros no topo da p�gina e o outro mais elaborado com mensagens nos campos obrigat�rios.

Nota: Conhe�a a forma��o Front-end developer da DevMedia e saia na frente dos concorrentes no mercado de trabalho.

Exibindo Mensagens no Topo do Formul�rio

Vamos criar um formul�rio contendo campos b�sicos para simular um cadastro de clientes com os elementos HTML text, radiobuttons e checkbox, todos a serem validados via JavaScript e jQuery, exibindo para o usu�rio uma mensagem no topo do formul�rio caso exista erro no seu preenchimento.

Para isso, ser� criada uma pasta com o nome Valida��oJQueryTopo e dentro desta ser� criada uma pasta _js, onde ser�o criados os arquivos nos formatos .js (JavaScript). O primeiro a ser criado pode ser feito no notepad ou em qualquer editor de texto. Este ter� o nome fun��es.js e ser� implementado de acordo com a Listagem 1.


var reDigits = /^\d+$/;

function numInteiro(pStr)
{
	if (reDigits.test(pStr)) 
	{
		return true;
	} 
	else 
	if (pStr != null && pStr != "") 
	{
		return false;
	}
} 

var reDecimalPt = /^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/;
var reDecimalEn = /^[+-]?((\d+|\d{1,3}(\,\d{3})+)(\.\d*)?|\.\d+)$/;
var reDecimal = reDecimalPt;

function numReal(pStr)
{
	charDec = ",";
	if (reDecimal.test(pStr)) 
	{
		pos = pStr.indexOf(charDec);
		decs = pos == -1? 0: pStr.length - pos - 1;
		return true;
	} 
	else
	if (pStr != null && pStr != "") 
	{
		return false;
	}
} 

function validaCPF(cpf) 
{
		cpf = cpf.replace('.','');
		cpf = cpf.replace('.','');
		cpf = cpf.replace('-','');
		
		erro = new String;
		if (cpf.length < 11) erro += "Sao necessarios 11 digitos para 
		verificacao do CPF! \n\n"; 
		var nonNumbers = /\D/;
		if (nonNumbers.test(cpf)) erro += "A verificacao de CPF suporta 
		apenas numeros! \n\n";	
		if (cpf == "00000000000" || cpf == "11111111111" || 
		cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || 
cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || 
cpf == "88888888888" || cpf == "99999999999"){
			  erro += "Numero de CPF invalido!"
		}
		var a = [];
		var b = new Number;
		var c = 11;
		for (i=0; i<11; i++){
			a[i] = cpf.charAt(i);
			if (i <  9) b += (a[i] *  --c);
		}
		if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
		b = 0;
		c = 11;
		for (y=0; y<10; y++) b += (a[y] *  c--); 
		if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
		status = a[9] + ""+ a[10]
		if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10])){
			erro +="Digito verificador com problema!";
		}
		if (erro.length > 0){
			return false;
		}
		return true;
}

function verificaData(Data)
 {
  Data = Data.substring(0,10);
  
  var dma = -1;
  var data = Array(3);
  var ch = Data.charAt(0); 
  for(i=0; i < Data.length && (( ch >= '0' && 
  ch <= '9' ) || ( ch == '/' && i != 0 ) ); ){
   data[++dma] = '';
   if(ch!='/' && i != 0) return false;
   if(i != 0 ) ch = Data.charAt(++i);
   if(ch=='0') ch = Data.charAt(++i);
   while( ch >= '0' && ch <= '9' ){
    data[dma] += ch;
    ch = Data.charAt(++i);
   } 
  }
  if(ch!='') return false;
  if(data[0] == '' || isNaN(data[0]) || parseInt(data[0]) < 1) return false;
  if(data[1] == '' || isNaN(data[1]) || parseInt(data[1]) < 1 || 
  parseInt(data[1]) > 12) return false;
  if(data[2] == '' || isNaN(data[2]) || ((parseInt(data[2]) < 0 || 
  parseInt(data[2]) > 99 ) && (parseInt(data[2]) < 
  1900 || parseInt(data[2]) > 9999))) return false;
  if(data[2] < 50) data[2] = parseInt(data[2]) + 2000;
  else if(data[2] < 100) data[2] = parseInt(data[2]) + 1900;
  switch(parseInt(data[1])){
   case 2: { if(((parseInt(data[2])%4!=0 || 
   (parseInt(data[2])%100==0 && parseInt(data[2])%400!=0)) 
   && parseInt(data[0]) > 28) || parseInt(data[0]) > 
   29 ) return false; break; }
   case 4: case 6: case 9: case 11: { if(parseInt(data[0]) > 
   30) return false; break;}
   default: { if(parseInt(data[0]) > 31) return false;}
  }
  return true; 
  
}

Listagem 1. Fun��es b�sicas para valida��es dos campos

A vari�vel reDigits que recebe uma express�o regular relativa a n�meros decimais.

Em seguida existe a fun��o numInteiro, que � respons�vel por validar se um n�mero � inteiro ou n�o, retornando verdadeiro se o n�mero � inteiro ou falso se o n�mero n�o for inteiro.

Logo em seguida existem tr�s vari�veis:

reDecimalPt, que recebe a m�scara do campo padr�o de n�meros reais do formato portugu�s;
reDecimalEn, que recebe a m�scara do campo padr�o de n�meros reais do formato ingl�s, e;
reDecimal, que recebe o padr�o a ser utilizado para verifica��o de n�meros reais no formato portugu�s (reDecimalPt).

Em seguida existe a fun��o numReal que � respons�vel por verificar se um n�mero informado � real, retornando verdadeiro ou se n�o for, retorna falso.

Logo abaixo existe a fun��o validaCPF, respons�vel por inicialmente substituir a m�scara (que contem tra�os e pontos) por valores nulos, al�m de verificar se o CPF informado � v�lido de acordo com os padr�es pr�prios de valida��es e, por fim, faz a verifica��o da quantidade de d�gitos informados se est� no tamanho v�lido (que s�o de 11 caracteres), retornando verdadeiro se o n�mero informado � correto ou falso se for incorreto.

Al�m disso temos a fun��o verificaData � respons�vel por inicialmente verificar se a quantidade de caracteres informada est� no tamanho correto, retirar a m�scara colocada durante o carregamento do formul�rio, verificar se o dia, m�s e ano est�o corretos e formato dd/mm/aaaa, retornando verdadeiro se a data informada � v�lida ou falso se for inv�lida.

Em seguida, dentro da pasta Valida��oJQueryTopo ser� criado um arquivo com o nome jquery_form1 no formato .html. Acrescente a ele o c�digo descrito na Listagem 2.


<!DOCTYPE html>
<head>
<title>Validando Formul�rios com jQuery  - 1 </title>
 
<script language="javascript" src="_js/jquery-1.6.1.min.js"></script>
<script language="javascript" src="_js/funcoes.js"></script>
<script language="javascript" src="_js/jquery.maskedinput-1.1.4.pack.js">
</script>
 
<script language="javascript">
 
$(document).ready(function(){
        $("#cpf").mask("999.999.999-99");
        $("#data_nasc").mask("99/99/9999");
        $("#formcad").submit(validar);
 
});     
 
function validar()
{
        var msg="";
        
        
        $("[obrigatorio=sim]").each(function(){
               
			if( $(this).attr("type") == "radio"  )
			{
			   
			   if( $("input[name="+$(this).attr("name")+"]:checked").length == 0 )
			   {                              
			           msg += "<li>O campo " + $(this).attr("rotulo") 
			           + " � obrigat�rio</li>";
			   }
			}
			else
			if( $(this).attr("type") == "checkbox"  )
			{
			   
			   if( $("input[grupock="+$(this).attr("grupock")+"]:checked").length < 
			   $(this).attr("qde_min") )
			   {                              
			           msg += "<li>Pelo menos "+$(this).attr("qde_min")
			           +" op��o(�es) do campo(s) " + $(this).attr("rotulo") 
			           + " deve(m) ser marcado(s)!</li>";
			   }
			}
			else           
			if( $(this).val() == '' )
			{
			   msg += '<li>O campo '+ $(this).attr("rotulo")+' � 
			   obrigat�rio !</li>';               
			}
			else
			if( $(this).attr("tipo_dado") == "cpf" && 
			!validaCPF($(this).val()) )
			{
			   msg += '<li>O campo '+ $(this).attr("rotulo")+' 
			   deve ser v�lido !</li>';               
			}              
			else
			if( $(this).attr("tipo_dado") == "data" && 
			!verificaData($(this).val()) )
			{
			   msg += '<li>O campo '+ $(this).attr("rotulo")+' 
			   deve ser uma data v�lida !</li>';        
			}              
			else
			if( $(this).attr("tipo_dado") == "inteiro" && 
			!numInteiro($(this).val()) )
			{
			   msg += '<li>O campo '+ $(this).attr("rotulo")+' 
			   deve ser um numero inteiro v�lido !</li>';        
			}              
			else
			if( $(this).attr("tipo_dado") == "real" && 
			!numReal($(this).val()) )
			{
			   msg += '<li>O campo '+ $(this).attr("rotulo")+' 
			   deve ser um numero real v�lido !</li>';           
			}
        
});     
        if(msg=='')
        {       
               return true;
        }
        else
        {
               msg = '<ul>' + msg + '</ul>';
               $("#divError").html(msg).css("color", "red").fadeIn(300);
               
               return false;
        }       
} 
</script>
<style> 
        p{
               margin: 2px;
               padding: 2px;
        }
</style>
</head>
<body>
<h3>Validando Formul�rios com jQuery  - 1 </h3>
<form method="post" id="formcad" action="">
 
        <div id="divError" style="display:none"></div>        
        <p>Nome</p>
        <input type="text" name="nome" id="nome" obrigatorio="sim" 
        rotulo="nome do cliente"  size="60" maxlength="100"/>
        
        <p>Sexo</p>
        <input type="radio" name="sexo" id="sexoM" value="M" 
        rotulo="sexo" obrigatorio="sim">Masculino<br>
        <input type="radio" name="sexo" id="sexoF" value="F" 
        >Feminino<br>
               
        <p>CPF:</p>
        <input type="text" name="cpf" id="cpf" obrigatorio="sim" 
        rotulo="CPF" tipo_dado="cpf" size="25" maxlength="14"/>
        
        <p>Propriedades:</p>
        <input type="checkbox" name="tem_carro" id="tem_carro" 
        value="S" obrigatorio="sim" rotulo="propriedades" 
        grupock="propriedade" qde_min="1">Carro<br>
        <input type="checkbox" name="tem_moto" id="tem_moto" 
        value="S" grupock="propriedade">Moto<br>
        <input type="checkbox" name="tem_imovel" id="tem_imovel" 
        value="S" grupock="propriedade">Im�vel<br>
        
        <p>Data de nascimento:</p>
        <input type="text" name="data_nasc" id="data_nasc" 
        obrigatorio="sim" rotulo="Data de nascimento" tipo_dado="data" />
 
        <p>N�mero de filhos:</p>
        <input type="text" name="filhos" id="filhos" 
        obrigatorio="sim" rotulo="n�mero de filhos" 
        tipo_dado="inteiro" />
 
        <p>Sal�rio:</p>
        <input type="text" name="salario" 
        id="salario" obrigatorio="sim" rotulo="sal�rio" 
        tipo_dado="real" />
        
<p> </p>
        <input type="submit" value="Enviar" /> 
</form>
</body>
</html>

Listagem 2. C�digos da p�gina jquery_form1.html

Dentro do comando script language="javascript" src s�o feitas as importa��es dos arquivos da pasta _js a serem utilizados na p�gina HTML.

A fun��o jQuery $(document).ready(function() � respons�vel por afirmar que a p�gina est� pronta para ser executada com o que est� dentro da fun��o. Nela cont�m comandos para colocar m�scara no CPF e na Data de Nascimento para o formul�rio.

Repare que a fun��o validar � respons�vel por fazer as valida��es via jQuery. Nela � declarada uma vari�vel com o nome de msg que inicialmente recebe vazio e tem finalidade ir incrementando nela uma mensagem de erro.

Em seguida � declarada uma fun��o jQuery $("[obrigatorio=sim]").each(function(){ que � respons�vel por obter todo o atributo obrigat�rio que est� declarado em cada campo e, se for sim, o campo entra nessa fun��o para ser validado.

Dentro dessa fun��o existem condi��es respons�veis por armazenar o tipo de campo:

Se o tipo for radio, � informada a condi��o $(this).attr("type") == "radio" e dentro dela verifica se a quantidade de indexes clicados: se for igual a 0 � incrementada uma mensagem para a vari�vel msg dizendo que o campo radio com o campo Sexo � obrigat�rio.
Se o tipo de campo for checkbox, � informada a condi��o $(this).attr("type") == "checkbox" e dentro dela verifica se a quantidade de itens selecionados: se for menor que a quantidade m�nima (informado no campo pelo atributo: qde_min), que no caso � 1, ent�o � incrementada na vari�vel msg dizendo que pelo menos 1 op��o do campo Propriedades precisa ser informado.
Se o tipo de campo for text e n�o houver m�scara ou atributo no campo, � informada a condi��o $(this).val() == '', que verifica se houve dados informados no campo; se n�o houver, � incrementada na vari�vel msg dizendo que o campo � obrigat�rio. Essa valida��o � referente ao campo Nome.
Em seguida existem a condi��o $(this).attr("tipo_dado") == "cpf" && !validaCPF($(this).val()), que verifica se o tipo_dado � cpf (referente ao campo CPF) e se o valor informado est� correto de acordo com a fun��o validaCPF, se esse campo estiver com dados incorretos � incrementada na vari�vel msg dizendo que o CPF precisa ser v�lido.
A condi��o $(this).attr("tipo_dado") == "data" && !verificaData($(this).val()) verifica se o tipo_dado � data (referente ao campo Data de Nascimento). Se o valor informado estiver incorreto, de acordo com a fun��o verificaData, � incrementada na vari�vel msg dizendo que a Data de Nascimento precisa ser v�lida.
A condi��o $(this).attr("tipo_dado") == "inteiro" && !numInteiro($(this).val()) verifica se o tipo_dado � inteiro (referente ao campo N�mero de Filhos) e se o valor informado est� num formato correto de acordo com a fun��o numInteiro. Se esse campo estiver com dados incorretos, � incrementada na vari�vel msg dizendo que o campo N�mero de Filhos precisa ser v�lido.
E por fim a condi��o $(this).attr("tipo_dado") == "real" && !numReal($(this).val()) verifica se o tipo_dado � real (referente ao campo Sal�rio) e se o valor informado est� num formato correto de acordo com a fun��o numReal. Se esse campo estiver com dados incorretos � incrementada na vari�vel msg dizendo que o campo Sal�rio precisa ser v�lido.

Abaixo existe uma condi��o afirmando que se a vari�vel msg estiver vazia, ent�o � porque n�o houve erros no preenchimento e � retornado para dar continuidade ao formul�rio. Se existir ao menos uma mensagem de erro, � incrementada dentro de uma div (configurada com efeitos em CSS) uma listagem de erros no topo do formul�rio.

Dentro da tag � criado um CSS para cada par�grafo e, por motivo de design, em cada campo e dentro da tag s�o criados os labels com seus respectivos campos e propriedades, como Nome, Sexo, CPF, Propriedades, Data de nascimento, N�mero de filhos, Sal�rio, al�m do bot�o Enviar. Em cada campo existe um name, id, obrigat�rio (se permite a valida��o), o r�tulo (descrevendo o nome do campo para ser exibido na mensagem) e o tipo de dado (onde � comparado o que o usu�rio informou com o tipo de dado que � correto).

Ao testar a p�gina, se o usu�rio n�o informar os dados em seus respectivos campos, ser� exibida na p�gina uma div contendo as mensagens de erro, de acordo com a Figura 1.

**Figura 1**. P�gina sendo exibida no navegador, ap�s ter clicado no bot�o Enviar, mostrando as mensagens no topo do formul�rio

Exibindo Mensagens Elaboradas

Agora nesse t�pico ser� abordado um formul�rio contendo campos b�sicos simulando um cadastro de clientes com os elementos HTML text, radio, checkbox e password, a serem validados via JavaScript com jQuery, exibindo para o usu�rio uma mensagem em cada campo no formul�rio caso exista erro no seu preenchimento.

Ser� criada uma pasta Valida��oJQueryComMelhorias e dentro dessa ser� criada uma outra pasta _js, onde ser�o incrementados os arquivos nos formatos .js (JavaScript). Os arquivos que foram colocados na pasta _js do primeiro exemplo (Valida��oJQueryTopo) podem ser colocados nessa pasta, por�m, ser� necess�rio colocar a fun��o fun��es.js, que est� descrita na Listagem 3.


function validar()
{
	var msg="";
	
	var tudo_ok=true;
	
	$("[obrigatorio=sim]").each(function(){
		
		msg="";		
		
		if( $(this).attr("type") == "radio"  )
		{
			
			if( $("input[name="+$(this).attr("name")+"]:checked")
			.length == 0 )
			{				
				msg = "O campo " + $(this).attr("rotulo") + " 
				� obrigat�rio";
			}
		}
		else
		if( $(this).attr("type") == "checkbox"  )
		{
			
			if( $("input[grupock="+$(this).attr("grupock")+"]
			:checked").length < $(this).attr("qde_min") )
			{				
				msg = "Pelo menos "+$(this).attr("qde_min")+" 
				op��o(�es) do campo(s) " + $(this).attr("rotulo") 
				+ " deve(m) ser marcado(s)!";
			}
		}
		else		
		if( $(this).val() == '' )
		{
			msg = 'O campo '+ $(this).attr("rotulo")+' � obrigat�rio !';		
		}
		else
		if( $(this).attr("tipo_dado") == "cpf" && 
		!validaCPF($(this).val()) )
		{
			msg = 'O campo '+ $(this).attr("rotulo")+' 
			deve ser v�lido !';		
		}		
		else
		if( $(this).attr("tipo_dado") == "data" && 
		!verificaData($(this).val()) )
		{
			msg = 'O campo '+ $(this).attr("rotulo")+' 
			deve ser uma data v�lida !';		
		}		
		else
		if( $(this).attr("tipo_dado") == "inteiro" && 
		!numInteiro($(this).val()) )
		{
			msg = 'O campo '+ $(this).attr("rotulo")+' 
			deve ser um numero inteiro v�lido !';		
		}		
		else
		if( $(this).attr("tipo_dado") == "real" && 
		!numReal($(this).val()) )
		{
			msg = 'O campo '+ $(this).attr("rotulo")+' 
			deve ser um numero real v�lido !';		
		}	
		else
		if( $(this).attr("tipo_dado") == "email" && 
		!ValidaEmail($(this).val()) )
		{
			msg = 'O campo '+ $(this).attr("rotulo")+' 
			deve ser um email v�lido !';		
		}	

		if( msg != '' )
		{
			tudo_ok = false;
		}


		if( $('#div_error_'+$(this).attr("name")) )
		{
			$('#div_error_'+$(this).attr("name")).html(msg);
		}

	}); 
	
	return tudo_ok;
	
}

Listagem 3. Fun��o para valida��o de campos de um modo alternativo

Essa fun��o � respons�vel por criar uma valida��o para cada tipo de campo radio e checkbox, al�m das propriedades text serem comparadas com a fun��o val.

Antes s�o criadas duas vari�veis: uma com o nome msg (respons�vel por receber as mensagens de cada campo) e outra com o nome tudo_ok (respons�vel por retornar para o formul�rio se houve erros durante a valida��o da p�gina, exibindo a mensagem no campo com erro atrav�s do div_error). Se n�o houver erros, a p�gina � submetida.

Nota: Em cada campo (exceto o do nome) h� a compara��o se o atributo for tipo_dado - se a respectiva fun��o (validar CPF, Data de Nascimento, Inteiro ou Real para text) retornar falso e se o n�mero da contagem de sele��o, tanto para o nome do atributo �radio� quanto para o �checkbox�, for menor que 1, � incrementada a mensagem para a vari�vel msg com seu r�tulo.

Dentro da pasta Valida��oJQueryComMelhorias ser� criada uma outra pasta com o nome de _css e ser� criado um novo arquivo de texto com o nome de estilo.css a ser implementado com o c�digo descrito na Listagem 4.


@charset "utf-8";
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
p{
	margin: 2px;
	padding: 2px;
}	
.class_font_rotulo {
	font-weight:bold;
	display:block;

}
.class_error {
	font-size:12px;
	color:#FF0000;
	margin-left:5px;
	font-weight:normal;
	margin-bottom:10px;
}

Listagem 4. C�digo em CSS respons�vel por colocar efeitos de design para o futuro formul�rio

Em seguida, dentro da pasta Valida��oJQueryComMelhorias ser� criado um arquivo com o nome jquery_form1 no formato .html e ter� o mesmo c�digo descrito na Listagem 5.


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validando Formul�rios com jQuery  - 2 </title>
<script language="javascript" src="_js/jquery-1.6.1.min.js"></script>
<script language="javascript" src="_js/funcoes.js"></script>
<script language="javascript" src="_js/jquery.maskedinput-1.1.4.pack.js"
></script>

<script language="javascript">


$(document).ready(function(){

    // utiliza��o do plugin de maskara 
    $("#cpf").mask("999.999.999-99");
    $("#data_nasc").mask("99/99/9999");       
    $("#formcad").submit(validar_custom);    
    $('[obrigatorio=sim]').each(function(){
          $("label[for="+$(this).attr("name")+"]")
          .append(" <span style='color:red;'>*</span> ")
          .css('font-weight','bold');
    });
});   

function validar_custom()
{
    var tudo_ok;      
    tudo_ok = validar();
    
    if( !tudo_ok ) { return false; }   
    
    if( $('#senha').val() != $('#senha_confirm').val() )
    {
          $('#div_error_senha_confirm').html('A confirma��o da senha � 
          diferente da senha!');
          return false;
    }

    return true;
    
} 

</script>

<link href="_css/estilo.css" rel="stylesheet" type="text/css" />

</head>
<body>

<h3>Validando Formul�rios com jQuery  - 2 </h3>

<form method="post" id="formcad" action="">
        
    <label for="nome" class="class_font_rotulo">Nome:</label>
    <input type="text" name="nome" id="nome" obrigatorio="sim" 
    rotulo="nome do cliente"  size="60" maxlength="100"/>
    <div id="div_error_nome" class="class_error"></div>
 
  
  
    <label for="sexo" class="class_font_rotulo" >Sexo</label>
    <label><input type="radio" name="sexo" id="sexoM" value="M" 
    rotulo="sexo" obrigatorio="sim">Masculino<br></label>
    <label><input type="radio" name="sexo" id="sexoF" value="F" 
    >Feminino</label><br>
    <div id="div_error_sexo" class="class_error"></div>
          
      
    <label for="cpf" class="class_font_rotulo" >CPF:</label>
    <input type="text" name="cpf" id="cpf" obrigatorio="sim" 
    rotulo="CPF" tipo_dado="cpf" size="25" maxlength="14"/>
    <div id="div_error_cpf" class="class_error"></div>
    
    <label for="tem_carro" class="class_font_rotulo" >Propriedades:</label>
    <label><input type="checkbox" name="tem_carro" id="tem_carro" value="S" 
    obrigatorio="sim" rotulo="propriedades" grupock="propriedade" 
    qde_min="1">Carro<br></label>
    <label><input type="checkbox" name="tem_moto" 
    id="tem_moto" value="S" grupock="propriedade">Moto<br></label>
    <label><input type="checkbox" name="tem_imovel" 
    id="tem_imovel" value="S" grupock="propriedade">Im�vel<br></label>
    <div id="div_error_tem_carro" class="class_error"></div>
    
    <label for="data_nasc" class="class_font_rotulo" >Data de nascimento:</label>
    <input type="text" name="data_nasc" id="data_nasc" 
    obrigatorio="sim" rotulo="Data de nascimento" tipo_dado="data" />
    <div id="div_error_data_nasc" class="class_error"></div>

    <label for="filhos" class="class_font_rotulo" >N�mero de filhos:</label>
    <input type="text" name="filhos" id="filhos" obrigatorio="sim" 
    rotulo="n�mero de filhos" tipo_dado="inteiro" />
    <div id="div_error_filhos" class="class_error"></div>

    <label for="salario" class="class_font_rotulo" >Sal�rio:</label>
    <input type="text" name="salario" id="salario" obrigatorio="sim" 
    rotulo="sal�rio" tipo_dado="real" />
    <div id="div_error_salario" class="class_error"></div>


    <label for="senha" class="class_font_rotulo" >Senha:</label>
    <input type="password" name="senha" id="senha" obrigatorio="sim" rotulo="senha"  />
    <div id="div_error_senha" class="class_error"></div>

    <label for="senha_confirm" class="class_font_rotulo" >Confirma��o da Senha:</label>
    <input type="password" name="senha_confirm" id="senha_confirm"  
    obrigatorio="sim" rotulo="senha"  />
    <div id="div_error_senha_confirm" class="class_error"></div>

    
<p> </p>
    <input type="submit" value="Enviar" />   
</form>
</body>
</html>

Listagem 5. C�digos da p�gina jquery_form1.html

Dentro do comando script language="javascript" src s�o feitas as importa��es dos arquivos que est�o no formato .js localizados na pasta _js a serem utilizados na p�gina.

Em seguida, � declarada a fun��o JQuery $(document).ready(function(), que � respons�vel por colocar m�scaras no CPF e na Data de Nascimento para o formul�rio, enviar por submiss�o a fun��o validar_custom ao formul�rio e tamb�m cont�m uma condi��o dizendo que se na propriedade de cada campo houver a tag obrigat�rio=sim � mostrada para o usu�rio a mensagem de erro com design em CSS.

A fun��o validar_custom cont�m uma vari�vel denominada tudo_ok, que recebe a fun��o validar() (programada anteriormente no arquivo fun��es.js) e � respons�vel por retornar mensagens ao formul�rio durante a sua valida��o quando houver erros e tamb�m por validar a compara��o dos campos senha e confirma��o de senha, verificando se ambos foram informados igualmente.

Abaixo � criado um comando link href="_css/estilo.css" que � respons�vel por importar os efeitos de CSS do arquivo estilo.css criado anteriormente dentro da pasta _css que servir� como um design para o formul�rio.

Dentro das tags s�o criados os labels com seus respectivos campos e propriedades, que s�o: Nome, Sexo, CPF, Propriedades, Data de nascimento, N�mero de filhos, Sal�rio, Senha, Confirma��o da Senha, e o bot�o Enviar. Em cada campo existe um name, id, obrigat�rio (se permite a valida��o), o r�tulo (descrevendo o nome do campo para ser exibido na mensagem) e o tipo de dado (onde � comparado o que o usu�rio informou com o tipo de dado que � correto).

Se ao testar a p�gina e n�o informar dados em seus respectivos campos, ser� exibida na p�gina uma div abaixo de cada campo, contendo as mensagens de erro, de acordo com o que mostra na Figura 2.

**Figura 2**. P�gina sendo exibida no navegador, ap�s ter clicado no bot�o Enviar, mostrando as mensagens abaixo de cada campo no formul�rio

Veja que o primeiro exemplo Valida��oJQueryTopo � recomendado para quem deseja que as mensagens sejam exibidas independentemente da forma com que os campos estejam sendo apresentados no formul�rio, fazendo com que um �nico elemento div seja respons�vel por exibir as mensagens no topo. J� o segundo exemplo Valida��oJQueryComMelhorias � recomendado para quem deseja um formul�rio mais elaborado, com melhor desempenho e que cada campo seja respons�vel por haver uma mensagem de erro (caso exista), sendo assim, cada campo apresente sua div pr�pria.

Links:

Plugin: jQuery
Arquivo: jquery.maskedinput-1.1.4.pack

Confira outros conte�dos:

Por Igor Em 2015

Promo��o de Natal

Oferta exclusiva de Natal!

Pagamento anual

12x no cartão

De: R$ 69,00

Por: R$ 59,90

Total: R$ 718,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
12 meses de acesso

Pagamento recorrente

Cobrado mensalmente no cartão

De: R$ 79,00

Por: R$ 59,90 /mês

Total: R$ 718,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
Fidelidade de 12 meses
Não compromete o limite do seu cartão

<Perguntas frequentes>

Carreira

Metodologia

Assinatura e Pagamentos

Cadastro

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

jQuery Validate: Validando formul�rios com jQuery

Veja nesse artigo como criar valida��es de formul�rios para p�ginas web no formato HTML utilizando jQuery e CSS.

Exibindo Mensagens no Topo do Formul�rio

Exibindo Mensagens Elaboradas

Confira outros conte�dos:

<Perguntas frequentes>

Por onde devo iniciar os estudos?

Em quanto tempo vou me tornar um programador?

Eu preciso de um diploma de faculdade para come�ar a atuar como programador?

Por que a programa��o se tornou a profiss�o mais promissora da atualidade?

Quais s�o os principais diferenciais da DevMedia?

O que eu irei aprender estudando pela DevMedia?

Quais as vantagens de aprender programa��o atrav�s da linguagem JavaScript?

A plataforma oferece certificados?

A plataforma tem suporte ao aluno, como funciona?

A DevMedia me forma como programador Full Stack?

Tem hor�rio para as aulas?

Por que a DevMedia n�o usa videoaulas em sua did�tica?

Preciso de um computador espec�fico para estudar na DevMedia?

Eu consigo estudar pelo celular?

A DevMedia tem aplicativo?

Preciso estar na faculdade para acompanhar os estudos na DevMedia?

Quais s�o os planos de assinatura dispon�veis?

Adquirindo o plano, terei acesso a todo o conte�do?

A plataforma tem planos vital�cios?

A DevMedia tem fidelidade?

Como funciona o cancelamento?

A renova��o � autom�tica?

Como excluir meus dados da plataforma?