Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alexsandro XPT

jQuery Validation Plugin

Por , em Javascript

Recommended Posts

Alexsandro XPT    0

Alexsandro XPT
Postado

Estou usando o http://bassistance.de/jquery-plugins/jquer...gin-validation/

 

Estou tentando usar baloes em vez de uma simples mensagem.

 

 

Eu queria colocar os inputs com cores vermelhas e o balão parasse no primeiro erro da validaçao.

 

Eu consegui fazer parar no ultimo pois a validaçao é em todos os campos..

 

Alguem pode me ajudar?

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>fadsfsdfsda</title>
<script type="text/javascript" src="js/global/jq/core/jquery-1.2.1.pack.js" ></script>
<script type="text/javascript" src="js/global/jq/ui/dime/jquery.dimensions.pack.js" ></script>
<script type="text/javascript" src="js/global/jq/ui/valida/jquery.validate.pack.js" ></script>
<style>
<!--
/*div {filter: alpha(opacity=90); opacity:0.9;}*/
*{font-family:"Helvetica Neue","Lucida Grande",Helvetica,Arial,Verdana,sans-serif;}
div.seta1		  { background-color: #FFD324;font-size:0%;margin:0px }
div.seta2{
	background-color: #FFF6BF;
	font-size:0%;margin:0px;
	border-top:3px solid #FFD324;
	border-bottom:3px solid #FFD324}

div.setabox {border:2px solid #FFD324; background-color: #FFF6BF;width: 150px; color:#817134;font-size:75%;padding:1.4em;border-:}
inputa {font-size:220%}
-->
</style>
</head>

<script type="text/javascript">
$(function() {
	/*$(":checkbox,:text,:radio,:password,:file,textarea").focus(function(){
		$("#balao").hide();
		var bplace = $(this).offset();
		bplace.left += $(this).width();
		bplace.top += Math.round($(this).height()/2)-23;




		//console.log(bplace);

		$("#balao").css(bplace);
		$("#balao").fadeIn("fast",function(){

		});
	});*/
	$("#fteste").validate({
		onblur: true,
		rules:{
			T1:{
				required: true,
				email:true
			},
			S1:{
				required: true
			}
		},
		messages:{
			T1: {
				required: "Enter a username",
				email: "Digite um e-mail valido."
			},
			S1: {
				required: "Provide a <b>text</b>"
			}
		},
		errorPlacement:function(error, element){
			$("#setabox").html("");
			error.appendTo ( $("#setabox") );

			$("#balao").hide();
			var bplace = $(element).offset();
			bplace.left += $(element).width();
			bplace.top += Math.round($(element).height()/2)-23;




			//console.log(bplace);

			$("#balao").css(bplace);
			$("#balao").fadeIn("fast",function(){
			});

		}
	});
});
</script>

<body background="file:///C:/Documents%20and%20Settings/Administrador/Meus%20documentos/Minhas%20imagens/Moz_ffx_openStandards_1680x1050.gjpg">




<div style="position: absolute; width: 422px; height: 110px; z-index: 99999; left: 195px; top: 40px;border:1px solid none;display:none" id="balao">
<div class="seta1" style="position: relative; width: 1px; height: 1px; z-index: 1; left: 9px; top: 25px" id=""><img width="1" height="1" /></div>
<div class="seta1" style="position: relative; width: 1px; height: 3px; z-index: 1; left: 10px; top: 23px" id=""></div>
<div class="seta1" style="position: relative; width: 1px; height: 5px; z-index: 1; left: 11px; top: 19px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 1px; z-index: 1; left: 12px; top: 13px" id=""><img width="1" height="1" /></div>
<div class="seta2" style="position: relative; width: 1px; height: 3px; z-index: 1; left: 13px; top: 5px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 5px; z-index: 1; left: 14px; top: -5px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 7px; z-index: 1; left: 15px; top: -17px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 9px; z-index: 1; left: 16px; top: -31px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 11px; z-index: 1; left: 17px; top: -47px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 13px; z-index: 1; left: 18px; top: -65px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 15px; z-index: 1; left: 19px; top: -85px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 17px; z-index: 1; left: 20px; top: -107px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 19px; z-index: 2; left: 21px; top: -131px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 21px; z-index: 2; left: 22px; top: -157px" id=""></div>
<div class="setabox" style="position: relative; z-index: 1; left: 21px; top: -196px" id="setabox">Por favor digite a <strong>senha</strong>.</div>
</div>
<div style="position: absolute; width: 625px; height: 100px; z-index: 3; left: 288px; top: 260px" id="camada1">
<form method="post" action="" id="fteste">
	

	<p><input type="text" name="T1" id="T1" size="20"></p>
	<p><input type="text" name="T2" size="20" ></p>
	<p><input type="text" name="T3" size="20"></p>
	<p><input type="text" name="T4" size="20"></p>
	<p><textarea rows="2" name="S1" id="S1" cols="20"></textarea></p>
	<p><input type="radio" value="V1" checked name="R1"></p>
	<p><input type="checkbox" name="C1" value="ON"><br>
	<input type="submit" value="Submeter" name="B1"><input type="reset" value="Redefinir" name="B2"></p>
</form>
</div>
<p> </p>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

eu tive uma idéia, mas não sei se vai dar certo.

 

algoritmo:

 

se erro

chamar balão no objeto X

 

terminar script.

 

acho q é exit();

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alexsandro XPT    0

Alexsandro XPT
Postado

Nao será a melhor saida.. o melhor é usando o validate.

 

Alguem aqui no imasters entende de validate?

 

 

eu tive uma idéia, mas não sei se vai dar certo.

 

algoritmo:

 

se erro

chamar balão no objeto X

 

terminar script.

 

acho q é exit();

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito