Foros del Web » Programando para Internet » Jquery »

pintar inpus vacios con jquery

Estas en el tema de pintar inpus vacios con jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/01/2011, 13:13
 
Fecha de Ingreso: enero-2011
Mensajes: 1
Antigüedad: 8 años, 11 meses
Puntos: 0
pintar inpus vacios con jquery

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
  #2 (permalink)  
Antiguo 08/01/2011, 16:53
Avatar de Manuellama  
Fecha de Ingreso: noviembre-2006
Ubicación: Zafra, Extremadura, Spain, Spain
Mensajes: 174
Antigüedad: 13 años
Puntos: 10
Respuesta: pintar inpus vacios con jquery

<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
  #3 (permalink)  
Antiguo 08/01/2011, 16:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 8 meses
Puntos: 1277
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: pintar, vacios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 11:46.