Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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">](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> 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>Carregando comentários...