Validação com jQuery

[Eduardo Villa 2]

Olá galera, estou tendo um problema com um código que pode validar qualquer FORM...

 

Xxxxx.js

// Quando o formulário for enviado, essa função é chamada
$("form").live('submit',function(){
   var erro = 0;
   var dados = $(this).serialize();
   $(".required").each(function(){
       if($(this).val()==''){
           erro++;
           $("#msg").html("O campo "+$(this).attr('title')+" não pode ficar em branco");
       }
   });
   if(erro) return false;
   $("#carregando").show();
});
   //Mascara Input
   $("input[name=cep]").mask("99999-999");
   $("input[name=data]").mask("99/99/9999");
   $("input[name=cpf]").mask("999.999.999-99");
   $("input[name=telefone]").mask("(99) 9999-9999");


// Função que valida o campo e-mail
$.validateEmail = function(email){
   er = /^[a-zA-Z0-9][a-zA-Z0-9\._-]+@([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2}/;
   if(er.exec(email))
       return true;
   else
       return false;
};

 

Gostaria de fazer algumas outras adaptações:

- além de validar os campos em branco, quero validar o e-mail com a função...

if($(this).val()==''){

erro++;

$("#msg").html("O campo "+$(this).attr('title')+" não pode ficar em branco");

}ELSEIF(EMAIL){

$("#msg").html("E-mail inválido!");

}

[Leandro D. 0]

Dudesigner, porque você não tenta o jquery validate, eu utilizo num form meu e dá pra validar email como você informou. Verificar se campos são iguais e tal. Veja o form que eu tenho como exemplo:

<fieldset style="padding: 15; width: 320px; border: none">
<form method="get" action="Pages/cad_user.asp" name="cadastro" id="cadastro">
<label for="nome_exib"><font face="Calibri">Nome de exibição:</font></label><input type="text" name="nome_exib" id="nome_exib" size="20"><br>
<label for="nome_user"><font face="Calibri">Nome de usuário:</font></label><input type="text" name="nome_user" id="nome_user" size="20"><br>
<label for="pass"><font face="Calibri">Senha de acesso:</font></label><input type="password" name="pass" id="pass" size="20"><br>
<label for="conf_pass"><font face="Calibri">Confirmar senha:</font></label><input type="password" name="conf_pass" id="conf_pass" size="20"><br>
<label for="depto"><font face="Calibri">Departamento:</font></label><select size="1" name="depto" id="depto">
    <option selected></option>
       <OPTION value="Compras">Compras</OPTION>
       <OPTION value="Gerência">Gerência</OPTION>
       <OPTION value="PCP">PCP</OPTION>
       <OPTION value="RH">RH</OPTION>
       <OPTION value="Técnico">Técnico</OPTION>
       <OPTION value="Vendas">Vendas</OPTION>
       </select><br>
   <label for="email"><font face="Calibri">Email do usuário:</font></label><input type="text" name="email" id="email" size="20"><br>
   <label for="conf_email"><font face="Calibri">Confirmar email:</font></label><input type="text" name="conf_email" id="conf_email" size="20"><br>
   <label for="questao"><font face="Calibri">Pergunta secreta:</font></label><input type="text" name="questao" id="questao" size="20"><br>
   <label for="resposta"><font face="Calibri">Resposta:</font></label><input type="password" name="resposta" id="resposta" size="20"><br>        
<input type="hidden" value="não" name="situacao">
<label for="Cadastrar"></label><input type=image src=Imagens/mb_cadastrar.png title=Cadastrar name=Cadastrar style="border: 1px solid; border-color: #999999; cursor: pointer;" onmouseout="this.src='Imagens/mb_cadastrar.png';" onmouseover="this.src='Imagens/mb_cadastrar_over.png';">
</form>
</fieldset>

 

Aí eu utilizo o seguinte script para verificar ao submeter:

<script type="text/javascript">
		$(document).ready(function(){
			$('#cadastro').validate({
				rules:{ 
					nome_exib:{ 
						required: true,
					},
					nome_user: {
						required: true,
					},
					pass: {
						required: true,
						minlength: 6
					},
					conf_pass: {
						required: true,
						equalTo: "#pass"
					},
					depto: {
						required: true,
					},
					email:{ 
						required: true,
						email: true
					},
					conf_email: {
						required: true,
						equalTo: "#email"
					},
					questao:{ 
						required: true,
					},
					resposta: {
						required: true,
					},
				},
				messages:{
					nome_exib:{ 
						required: "Entre com um nome para exibição.",
					},
					nome_user: {
						required: "Entre com um nome de usuário.",
					},
					pass: {
						required: "Entre com uma senha de acesso.",
						minlength: "Sua senha deve ter no mínimo 6 caracteres."
					},
					conf_pass: {
						required: "Confirme sua senha de acesso.",
						equalTo: "A senha digitada não confere."
					},
					depto:{ 
						required: "Escolha um departamento.",
					},
					email:{ 
						required: "Entre com seu email.",
						email: "Entre com um email válido."
					},
					conf_email: {
						required: "Confirme seu email.",
						equalTo: "O email digitado não confere."
					},
					questao:{ 
						required: "Digite uma pergunta de segurança para recuperação de senha.",
					},
					resposta: {
						required: "Entre com sua resposta.",
					},
				}

			});
		});
</script>

 

Depois tem o css para estilizar a mensagem de erro que aparece abaixo dos inputs.

label.error {
font-family: Calibri;
font-size: 11px;
color: red;
padding: 0px;
margin: 2px 0;
width: 180px;
text-align: left;
}

 

Veja uma imagem do meu form em branco e depois em duas outras situações.

 

Espero que ajude, se tiver dúvidas posta aí. Segue link onde você pode baixar o jquery validate e ver a documentação e algumas demos.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

[Eduardo Villa 2]

Leandro D. utilizei o JQuery Validate, mas notei que ele deu problemas no IE por isso deixei ele de lado.

Fiz esta rotina e deu certo, par não validar com o PHP pensei em usar o JQuery mesmo...