Buenas tengo un pequeño ABM que trabaja con php, jquery y ajax, andava todo bien, hasta que intente validar el formulario, la verdad soy nuevo con ajax, y antes usaba el script validate para validar los formularios y siempre me funcionó bien, pero ahora que lo quiero usar con ajax me está dando unos problemas (no hace nada ni valida ni envía). Probe algunas cosas que encontre por inet y algunos no validaban y creaban el registro en blanco y otros validaba pero despues no enviaba... (El problema es al intentar crear un nuevo registro, el resto anda bien). Bueno les dejo el codigo a ver si me pueden dar un mano! desde ya muchas gracias! :)
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//ES">
<html>
<head>
<title>#####</title>
<meta charset="UTF-8">
<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/modulos/global.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script type="text/javascript">
//////////////////// DECLARACIÓN DE VARIABLES /////////////////////
var url ="php/servicios/Servicio.php";
var tabla = '';
var arreglo = new Array();
var cantidad;
////////////////////////// LOAD DE TABLA /////////////////////////
$(function(){
$(document).on("ready",function(){
$.ajax({
type: 'POST',
data: 'accion=traerServicios',
url: url,
dataType: 'json',
success: function (data) {
arreglo = data;
cantidad = arreglo.length;
cargarTabla();
tabla = '';
},
error: function(jqXHR, textStatus, error) {
alert( "error: " + jqXHR.responseText);
}
});
return false;
});
///////////////////////// NUEVO SERVICIO /////////////////////////
$("#btnNuevoServicio").click(function(){
////////////////////////// VALIDACIÓN DE FORMULARIO ///////////////
$("#frmNuevoServicio").validate({
// ACA ESTA EL PROBLEMA
rules: {
nombre: "required",
descripcion: "required"
},
messages: {
nombre: '<div class="mensaje2"><p>Por favor ingrese el nombre del Servicio.</p></div>',
descripcion: '<div class="mensaje2"><p>Por favor ingrese la Descripción.</p></div>'
},
submitHandler: function() {
$.ajax({
type: 'POST',
url: url,
data: $("#frmNuevoServicio").serialize(),
success: function (data) {
arreglo = data;
cantidad = arreglo.length;
cargarTabla();
tabla = '';
mostrarOcultar('tablaServicios', 'formularioServicio');
}
});
}
});
return false;
});
/////////////////////////// BUSCAR SERVICIOS /////////////////////////////////
$("#btnBuscarServicio").click(function(){
$.ajax({
type: 'POST',
url: url,
data: $("#frmBuscarServicio").serialize(),
success: function (data) {
arreglo = data;
cantidad = arreglo.length;
cargarTabla();
tabla = '';
}
});
return false;
});
//////////////////// RESTAURAR LISTA /////////////////////////
$("#btnRestaurar").click(function(){
$.ajax({
type: 'POST',
url: url,
data: 'accion=traerServicios',
success: function (data) {
arreglo = data;
cantidad = arreglo.length;
cargarTabla();
tabla = '';
}
});
return false;
});
});
</script>
</head>
<body>
<?PHP include_once 'cabecera.php';?>
<div class="contentGestion">
<div class="botones" id="botones">
<div class="botonDerecha">
<input type="button" class="btnNuevo" value="Nuevo Servicio" onclick="mostrarOcultar('formularioServicio', 'tablaServicios'), limpiarText()">
</div>
</div>
<div class="formulario" id="formularioServicio" style="display:none">
<form method="POST" id="frmNuevoServicio">
<label for="nombre">Nombre:</label><br>
<input type="text" name="nombre" id="nombre" class="cajaEstandar"><br>
<label for="descripcion">Descripción:</label><br>
<textarea name="descripcion" id="descripcion"></textarea><br>
<input type="hidden" name="accion" id="accion" value="nuevoServicio">
<input type="hidden" name="codigo" id="codigo" value="">
<input type="button" name="btnNuevoServicio" id="btnNuevoServicio" class="boton" value="Enviar">
<input type="reset" name="reset" id="reset" class="boton" value="Borrar">
<input type="button" value="Regresar" onclick="mostrarOcultar('tablaServicios', 'formularioServicio')">
</form>
</div>
<div class="tablaServicios" id="tablaServicios">
<form method="POST" id="frmBuscarServicio">
<label for="buscar">Buscar:</label><br>
<input type="text" name="buscar" id="buscar" class="cajaEstandar"><br>
<input type="hidden" name="accion" id="accion" value="buscarServicios"><br>
<input type="button" name="btnBuscarServicio" id="btnBuscarServicio" class="boton" value="Buscar">
<input type="button" name="btnRestaurar" id="btnRestaurar" class="boton" value="Restaurar">
</form>
<table class="tbl" id="tblServicios">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha</th>
<th>Usuario</th>
<th>Contenido</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="bodyTabla">
</tbody>
</table>
</div><!--TABLASERVICIOS-->
</div><!--contentGestion-->
</body>
</html> Tuve que sacar algunas funciones como cargar tabla editar y demas por que me decia que el texto era muy largo! saludos!