problema con validación del plugin BlockUI

Bernoo · #1 (**permalink**) 02/06/2014, 17:31

Buenas tardes:

estoy trabajando con el plugin de jquery BlockUI para bloquear un formulario mientras se ejecuta un query con php, el bloqueo funciona a la perfección, pero las validaciones me generan conflictos ya que las estoy haciendo con html5..

Cuando doy clic a mi botón "guardar" el bloqueo aparece en pantalla, pero cuando un campo no cumplió con una validación el mensaje de advertencia aparece mientras la pagina esta bloqueada, existe alguna manera de obtener desde jquery que todas las validaciones de htm5 se hayan ejecutado...

Mi código esta mas o menos así:

Código HTML:

 <script type="text/javascript">	
	$(function(){
		BlockUI();
	})
	
	function BlockUI() 	{ 
		$('#btnguardar').click(function(){
			$.blockUI({
					message: 'Estamos procesando sus datos...',
					  css: {
						border: 'none',
						padding: '20px',
						'-webkit-border-radius': '10px',
						'-moz-border-radius': '10px',
						opacity: .6,
						color: '#000',
						'font-size': '12pt',
							
					}
				});
			// tiempo en segundos que se desbloqueará la página
			setTimeout($.unblockUI, 1000);
		});
    }
  </script>
  
</head>

<body>
<div id="stylized" class="form">
	<form id="form" name="form" method="post" action="paginaP.php">
	<h1>Inicio de sesion</h1>
	<label>Nombre
	<span class="small">Agrega tu nombre</span>
	</label>
	<input type="text" name="name" id="name" required/>
	<label>Email
	<span class="small">Agregar direccion valida</span>
	</label>
	<input type="text" name="email" id="email" />
	<label>Contraseña
	<span class="small">Minimo 6 caracteres</span>
	</label>
	<input type="text" name="password" id="password" />

       <label for="nombre 2">Nombre</label>
        <input type="text" name="nombre2" id="nombre2" size="64" placeholder="Nombre de la organizaci&oacute;n" autofocus autocomplete required maxlength="100">
         <br/>
	<label for="Folio">Folio</label>
	<input type="text" name="folio" id="folio"  required pattern="[A-Za-z]{3,4}[ \-]?[0-9]{2}((0{1}[1-9]{1})|(1{1}[0-2]{1}))((0{1}[1-9]{1})|([1-2]{1}[0-9]{1})|(3{1}[0-1]{1}))[ \-]?[A-Za-z0-9]{3}" title="Folio invalido" maxlength="12">
                       
	
	<input class="fbtn" type="button" value="Guardar datos" id="btnguardar" name="btnguardar"/>
	
	<div class="espacios"></div>
	</form>
</div>

</body>
</html>