Validação de formularios com jQuery

ção É muito comum que em projetos que desenvolvemos tenham formulários e em formularios é praticamente necessário que haja validações qunaton à entrada de dados. Por mais que tenhamos quer validar a entrada dos dados por backend, uma boa prática é validar no front, através de JS.

A validação por JS é interessante uma vez que poupamos processamento  do servidor por requisições inuteis como uma postagem de dados faltando algum campo requerido, além de ser mais rápido para o usuário. Muito trabalho com validação de dados nos diversos trabalhos em que participei. No entanto, depois que passei a utilizar jQuery o trabalho com validação foi muito facilitado. Uso de vez enquando um plugin chamado jquery validator, mas é muito raro, uma vez que o tamanho dele em KBs pode tornar a página mais lenta de ser carregada, e o que, geralmente, preciso validar é entrada de dados em brando ou formato de emails. Para isso, eu desenvolvi uma função para validar  entrada de dados em branco e formato de e-mail, de frma bem simples e com poucas linhas de código. Essa função só funciona com jQuery.

function validaForm(){
	var emailfilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
	$(".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;
	}
}

Para que esta função funcione, você precisa incluir na tag form o atributo ‘onsubmit=”return validaForm()”‘ e a classe ‘required’ em cada campo que não pode ser em branco, para e-mail a classe ‘email’ como no exemplo a seguir.

<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>

Espero que seja tão util à vocês quanto écpara mim. Ckique nos links à baixo e veja em funcionamento.
http://tutoriais.leandrogarcia.com/jquery_validacao_formulario/

  1. Javascript para principiantes ou esquecidinhos. Aula 7 – Validando um formulário
  2. Desabilitar o Enter em um form com Javascript
  3. Framework -> Javascript -> jQuery
  4. Mascara de campo em JS com jQuery.
  5. jQuery plugin. Seus últimos tweets exibidos em seu blog



Sem Comentários »

Sem comentários

Rss dos comentários TrackBack URL

Deixe um comentário