pintar inpus vacios con jquery

1gabrielvc · #1 (**permalink**) 08/01/2011, 13:13

Chispas no se si es el for adecuado pero tengo una duda en jquery, que conste que soy nuevo

mi duda es la siguiente

tengo un formulario que no deja pasar a menos que llenes los 3 campos, y debajo del formulario te pinta que campo esta vacio,lo que no logro hacer es pintar cada campo vacio,

aclaro que a los campos les puse una clase y con la funcion each recorro cada inout para saber si esta vacio o no y ya con un for imprimo el que este vacio,

este es mi codigo
$(document).ready(function(){
$("#formulario").submit(function(event){
var vacio=0;
arr = new Array();
a=0;

$(".obligatorio").each(function(){
var datos = $(this).val();
if(datos == ''){
vacio=1;
var msg = $(this).attr("name");
//alert (msg);
arr[a]=msg;
a++;
}
});
$("#respuesta").empty();
if(vacio){
for(i=0; i<arr.length; i++){
$("#respuesta").fadeIn().append("<span>El campo <strong>" + arr[i] + "</strong> esta vacio</span> ");

//do{
//alert(i);
//} while(arr[i]);
}
//$("#respuesta").fadeOut(1500);
return false;
}
event.preventDefault();
$("#carga").fadeIn();
var url = $(this).attr('action');
var datos = $(this).serialize();
$.get(
url,
datos,
function(resultado)
{
success:
$('#respuesta').fadeIn().html(resultado).delay(200 0).fadeOut();
$("#carga").fadeOut(200);
//alert(resultado);
});
});
});

y este es el ejemplo

http://sectornetcancun.com/jquery/form/

saludos

Manuellama · #2 (**permalink**) 08/01/2011, 16:53

<html>
<head>
<title>JQuery Collapse</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#formulario").submit(function(event){
var vacio=0;
$(".obligatorio").each(function(){
$(this).removeClass("caja");
});
arr = new Array();
a=0;

$(".obligatorio").each(function(){
var datos = $(this).val();
if(datos == ''){
vacio=1;
var msg = $(this).attr("name");
//alert (msg);
arr[a]=msg;
a++;
}
});
$("#respuesta").empty();
if(vacio){
for(i=0; i<arr.length; i++){
$("#respuesta").fadeIn().append("<span>El campo <strong>" + arr[i] + "</strong> esta vacio</span> ");
$(".obligatorio").each(function(){

if ($(this).attr("name")==arr[i]){
$(this).addClass("caja");
}
});
}

//$("#respuesta").fadeOut(1500);
return false;
}

$(".obligatorio").removeClass("caja");
event.preventDefault();
$("#carga").fadeIn();
var url = $(this).attr('action');
var datos = $(this).serialize();
$.get(
url,
datos,
function(resultado)
{
success:
$('#respuesta').fadeIn().html(resultado).delay(200 0).fadeOut();
$("#carga").fadeOut(200);
//alert(resultado);
});
});
});

</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
a{color:#993300; text-decoration:none;}
.caja {
border:1px solid #d60606;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
position:relative;
}

span{
color:#d60606;
display:block;
}
</style>
</head>
<body>

<div>
<form id="formulario" action="correo.php">
<table>
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre" id="nombre" class="obligatorio" /></td>
</tr>
<tr>
<tr>
<td>Ciudad:</td>
<td><input type="text" name="ciudad" id="ciudad" class="obligatorio"/></td>
</tr>
<tr>
<tr>
<td>Pais:</td>
<td><input type="text" name="pais" id="pais" class="obligatorio" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="enviar" value="enviar" id="enviar" /></td>
</tr>
<tr>
<td colspan="2">
<div style="position:absolute; left:40px;">
<img src="cargador.gif" style="display:none;" id="carga"/>
</div>
<div id="respuesta" style="display:none;">
</div>
</td>
</tr>
</table>

</form>
</div>

</body>
</html>

Ese es el código correcto. Que aproveche. XD

caricatos · #3 (**permalink**) 08/01/2011, 16:58

Tema movido desde javascript