[SOLUCIONADO] Problemas con jquery validation, muestra errores pero no bloquea el submit

[MagoMarlon]

Buenos días colegas, nuevamente recurro a ustedes porque ando con un asunto que ya me tiene fuera de lugar!

Resulta que estoy usando jqueryvalidate para validar un formulario, el único aspecto diferente en este caso es que el formulario se encuentra en una modal, en un dialog de jquery. por lo tanto la validacion la declaro al abrir el dialog. asi

Código:

$('#NuevoMotivo').on('click',function() {		
		$( '#AgregarMotivo' ).dialog('open');
		$('#FrmAgregarMotivo').validate({
			rules:{
					ide: {required:true,minlength:5},
					descripcion: {required:true,minlength:5}
				},
			messages:{
					ide : {required:"Campo obligatorio",minlength:"mayor a 5"},
					descripcion : {required:"Campo obligatorio",minlength:"mayor a 5"}
				},
			errorElement: "div"
		});
	});

De cierta manera esto funciona, me muestra los mensajes de errores, pero no me bloquea el boton submit,, osea si hace la peticion, se supone que no debería dejarme hacer el submit. Este es el formulario.

Código HTML:

<form method="POST" id="FrmAgregarMotivo">
	<table class="table">
		<tr>
			<td>C&oacutedigo: </td><td><input type="text" name="ide" id="id"/></td>
		</tr>
		<tr>
			<td>Descripci&oacuten: </td> <td><input type="text" name="descripcion" id="desc"/></td>
		</tr>
		<tr>
			<td>Clasificaci&oacuten: </td>
			<td>
				<select name="atribucion" id="Atribucion">
					<option value="ninguno">Ninguno</option>
					<option value="1">Retraso en Minutos</option>
					<option value="2">Ausentismo en Horas</option>
					<option value="3">Ausentismo en D&iacuteas</option>
					<option value="4">Horas Extras</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Pasa a N&oacutemina </td> <td><input type="checkbox" name="nomina" id="nomina"/></td>
		</tr>
		<tr>
			<td>Aplica Fines de Semana </td> <td><input type="checkbox" name="finesSemana" id="finesSemana"/></td>
		</tr>
		<tr>			
			<td colspan="2"><input type="submit" id="crearmotivo" class="btn pull-right" value="Crear" /></td>
		</tr>			 		
	</table>
</form> 

Otra cosa en particular es que cuando yo envío ese formulario lo envío es por ajax,, realmente el submit lo pongo por el validator, pero yo no hago submit por ahí sino recibo por el id del boton mediante jquery y hago una petición ajax..

De igual manera eso no debería tener nada que ver,, el error debe de estar en la implementación o algo así.

Puse el llamado del .validate fuera del .open del dialog y ni los errores me mostraba, osea que debe declararse justo después de hacer el dialog.

[MagoMarlon]

ME RESPONDO A MI MISMO :P

Como es una petición ajax lo que se ejecuta en mi formulario y no es un method POST ni un Action normal hay que colocar la funcion ajax dentro de uno de los parámetros del .validate (que tampoco conocía)... esa funcion es

submitHandler: function() {
//aqui va tu peticion ajax
}

Código HTML:

//funcion para abrir el modal de crear motivo
	$('#NuevoMotivo').on('click',function() {	
		//Se abre el modal Agregar
		$( '#Agregar' ).dialog('open');
		//Se realiza la validacion de campos
		$('#FrmAgregarMotivo').validate({			
			//Se declaran las reglas para los name de los formularios
			rules:{
					idA: {required:true,minlength:5},
					descripcionA: {required:true,minlength:5}
				},
			//Se asignan mensajes de error a los name de las reglas de los campos
			messages:{
					idA : {required:"Campo obligatorio",minlength:"mayor a 5"},
					descripcionA : {required:"Campo obligatorio",minlength:"mayor a 5"}
				},
			/*Se asgina una etiqueta html donde 
			se quieran mostrar los errores*/
			errorElement: "div",
			/*Se usa esta funcion para declarar todo lo que se quiera 
			hacer si el formulario esta validado
			En este caso se realiza la funcion ajax para agregar*/
			submitHandler: function() {
				$.ajax({
					type:"post",
					dataType: "json",
					url: "index.php",
					data:{  m_modulo:"motivo",
							m_accion:"agregar", 
							m_vista:"agregado", 
							m_formato:"json", 
							id : $("#IdA").val(),
							descripcion : $("#DescripcionA").val(),
							atribucion : $("#AtribucionA").val(),
							nomina : ($("#NominaA").is(':checked')?1:""),
							finesSemana : ($("#FinesSemanaA").is(':checked')?1:"") 
							},
					success: function(datos, textStatus, jqXHR ){
								//datos = {"resultado":"1"};  
								if (datos==1){
										alert("Motivo Agregado con éxito");
										document.location.href = document.location.href;
									}else{
										alert("Error al Agregado el motivo");
									}
								},
					error: function(datos, textStatus, jqXHR ){  
								alert("error al procesar la petición: " + datos);
								}
				});							                  
            }
		});		
	});

Cómo pueden ver esto es un buen ejemplo para los que quieran hacer validaciones dentro de una ventana bodal de jquery. Y ademas para los que en vez de hacer un submit normal hacen una llamada ajax.

Espero les haya ayudado :)