Formulario limpio
Código HTML:
<form name="formularioUsuario" onSubmit="return validarFormulario()"
id="formusuario" action="procesar.php" method="POST">
<table>
<thead></thead>
<tbody>
<tr>
<td>Nombre</td>
<td>
<input type="text" name="nombre" id="nombre" value="" />
</td>
<td>
<span id="errorNombre" style="display:none;" >
Campo requerido
</span>
</td>
</tr>
<tr>
<td>Apellido</td>
<td>
<input type="text" name="apellido" id="apellido" value="" />
</td>
<td>
<span id="errorApellido" style="display:none;" >
Campo requerido
</span>
</td>
</tr>
<tr>
<td>e-Mail</td>
<td>
<input type="text" name="email" id="email" value="" />
</td>
<td>
<span id="errorEmail" style="display:none;" >
Campo requerido y debe estar correctamente escrito
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="guardar" value="Guardar" />
<input type="button" name="cancelar" value="Cancelar"
onclick="document.location.href = document.referrer" />
</td>
</tr>
</tbody>
</table>
<div id="resultado"></div>
Validacion del formulario y envio
Código:
$('#formusuario').ready(function(){
function validarFormulario(){
var valido= true;
// Valido el nombre
if ($('#nombre').val()==0){
valido= false;
jQuery("#errorNombre").show().css({'color':'red'});
}else{
jQuery("#errorNombre").hide(300);
}
// Valido el apellido
if ($('input#apellido').val()==0){
valido= false;
$("span#errorApellido").show().css({'color':'red'});
}else{
$("span#errorApellido").hide(300);
}
// Valido el email
if ($('input#email').val()==""){
valido= false;
$("#errorEmail").show().css({'color':'red'});
}else{
var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/
if (!expreg.test($('#email').val())) {
valido= false;
$("#errorEmail").show().css({'color':'red'});
}else{
$("#errorEmail").hide(300);
}}
// El formulario fue validado y se envia
return valido;
$('#formusuario').submit(function() {
// Enviamos el formulario usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#resultado').html(data);
}
})
return false;
});
});
}