Ir para o conteúdo

Validação Simples De Formularios Com Jquery


Criado por Leandro Garcia, Out 15 2010 12:06

2 respostas neste tópico
  • Por favor, faça o login para responder

#1 Leandro Garcia

Leandro Garcia
  • Leandro Garcia
  • Colaborador
  • 1 Revisões
  • LocalizaçãoSão Paulo, Brasil

Revisou 15 outubro 2010 - 12:06

function validaForm(){
	var emailfilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;//Regex para filtrar email válido
	$(".erro").remove();
	$(".emailerr").remove();
	var required = $(".required");
	var req = 0;
	for(i=0;i<required.length;i++){
		if($(required[i]).val() == ""){
			if($(".erro").length == 0){
				$("form").prepend('<p class="erro">campos obrigatorios</p>');
			}
			$(required[i]).css("border-color","#ff0000");
			req = 1;
		}
	}

	var email = $(".email");
	for(i=0;i<email.length;i++){
		if(!emailfilter.test($(email[i]).val())){
			if($(".emailerr").length == 0){
				$("form").prepend('<p class="emailerr">Email errado</p>');
			}
			$(email[i]).css("border-color","#ff0000");
			req = 1;
		}
	}

	if(req == 1){
		return false;
	}
}


<form action="#" method="post" onsubmit="return validaForm()">
	<fieldset>
		<label>Nome</label><br />
		<input type="text" name="nome" class="required" />

		<br />
		<label>Nome</label><br />
		<input type="text" name="nome" class="email" />
		<br />
		<input type="submit" value="OK" />
	</fieldset>
</form>

Com este código, basta inserir classe required em cada campo obrigatório e email para os campos de email.


Postei o código aqui

e pode ser visto em funcionamento aqui
Leandro Garcia
leandro.oliveira.garcia@gmail.com
leandro.o.garcia@homail.com

#2 Bruno

Bruno
  • Bruno
  • Colaborador
  • 33 Revisões

Revisou 15 outubro 2010 - 21:28

o método .each() pode facilitar a tua vida.
a tua er de emails, estava permitindo: email@provedor, oque é incorreto, pois um email, deve conter um dominio obrigatoriamente. (ou seja, no minimo um ponto após o arroba)

incorreto usar a tag <p> dessa forma em formulários.
<html>
<head> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#verify').submit(function(){
		return valida_form( this );
	});
	$('#verify2').submit(function(){
		return valida_form( this );
	});
});
function valida_form( form )
{
	$( form ).find('.error').remove();
	
	var req = 0;
	var emailfilter = /^[a-z0-9]+([_.-][a-z0-9]+)*@[a-z0-9]+([_.-][a-z0-9]+)*[.]+[a-z0-9]{2,4}$/i;
	
	$( form ).find('.email').each(function(){
		if( !emailfilter.test( $( this ).val() ) )
		{
			$( this ).css({border: '1px solid #f00'});
			$( this ).parent('label').append('<label class="error">Email errado!</label>');
			req += 1;
		}
	});
	
	$( form ).find('.required').each(function(){
		if( $( this ).val()=='' )
		{
			$( this ).css({border: '1px solid #f00'});
			$( this ).parent('label').append('<label class="error">Campo obrigatório!</label>');
			req += 1;
		}
	});	
	return !req;
}
</script>
<style type="text/css">
body {
	font: 12px Arial, Verdana, sans-serif;
}
label, 
label span {
	display: block;
}
label.error {
	font-size: 11px;
	color: #f00;
}
</style>
</head>
<body>
	<form action="#" method="post" id="verify">
		<fieldset>
			<label><span>Nome: </span>
				<input type="text" name="nome" class="required" /></label>
				
			<label><span>Endereço: </span>
				<input type="text" name="endereco" class="required" /></label>
				
			<label><span>CEP: </span>
				<input type="text" name="cep" /></label>
			
			<label><span>Email: </span>
				<input type="text" name="nome" class="email" /></label>
	
			<input type="submit" name="ok" value="OK" />
		</fieldset>
	</form>
	<form action="#" method="post" id="verify2">
		<fieldset>
			<label><span>Nome: </span>
				<input type="text" name="nome" class="required" /></label>
			
			<label><span>Email: </span>
				<input type="text" name="nome" class="email" /></label>
	
			<input type="submit" name="ok" value="OK" />
		</fieldset>
	</form>
</body>
</html>


#3 Édipo Costa Rebouças

Édipo Costa Rebouças
  • Édipo Costa Rebouças
  • Colaborador
  • 4 Revisões

Revisou 01 fevereiro 2011 - 13:50

Seria legal se usa-se o padrão de code de plugins jQuery


(function( $ ){
    var methods = {
        init: function(options){
            return this.each(function(){
                var form = this;
                $( form ).submit(function(){
                    $( form ).find('.error').remove();
                    
                    var req = 0;
                    var emailfilter = /^[a-z0-9]+([_.-][a-z0-9]+)*@[a-z0-9]+([_.-][a-z0-9]+)*[.]+[a-z0-9]{2,4}$/i;
                    
                    $( form ).find('.email').each(function(){
                            if( !emailfilter.test( $( this ).val() ) )
                            {
                                    $( this ).css({border: '1px solid #f00'});
                                    $( this ).parent('label').append('<label class="error">Email errado!</label>');
                                    req += 1;
                            }
                    });
                    
                    $( form ).find('.required').each(function(){
                            if( $( this ).val()=='' )
                            {
                                    $( this ).css({border: '1px solid #f00'});
                                    $( this ).parent('label').append('<label class="error">Campo obrigatório!</label>');
                                    req += 1;
                            }
                    });     
                    return !req;
                });            
            });
        }    
    }
    $.fn.valida_form = function( method ) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.valida_form' );
        }
    };

});

para chamar na pagina, seria somente:

$(document).ready(function(){
    $('#verify, #verify2').valida_form();
});

Esta revisão foi editado por Édipo Costa Rebouças: 01 fevereiro 2011 - 13:52





1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)