<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