jquery.validate required calendario

franfritz · #1 (**permalink**) 01/06/2012, 08:22

Estimados, estoy usando jquery.validate.js.
Pero tengo un problema, tengo un calendario en un input readonly="true" entonces al setear su clase como class="required" ya no funciona la validación.

Me pueden ayudar plis?

Saludos.

garciasanchezdani · #2 (**permalink**) 01/06/2012, 09:25

Hola franfritz, ¿podrías añadir un link para poder verlo? Es que no te entiendo bien...
Saludos

franfritz · #3 (**permalink**) 01/06/2012, 09:36

garciasanchezdani gracias. No tengo la web publica, pero trataré de explicarme mejor.

Cuando a un input text le doy class="required" y le doy submit, si el campo está vacío me da el mensaje "Este campo es requerido" cierto?, bien entonces tengo un input donde abro un calendario y esta con su readonly="true". Después de hacer el mismo ejercicio anterior si el campo del calendario está vacío me da el mensaje "Este campo es requerido" pero cuando selecciono una fecha el mensaje "Este campo es requerido" queda y no desaparece. Se entiende ahi?

Avisame.
De antemano gracias.
Saludos.

garciasanchezdani · #4 (**permalink**) 01/06/2012, 09:45

Hola amigo, sí, ya entendí mucho mejor...
Pues quizás el evento focusout te ayude para analizar que el campo tenga un valor verdaderamente... http://api.jquery.com/focusout/

Código Javascript:

Ver original<script>
         $("#campofecha").focusout(function(){  //el id de tu input fecha es campofecha
                  if( $(this).attr('value') != '' )
                  //aquí validas tu campo, porque sí contiene un valor      
         });
</script>

Suerte

quike88 · #5 (**permalink**) 01/06/2012, 10:00

Hola franfritz,

Estas usando algún plugin para tu calendario? Porque la validación debería funcionar correctamente sin importar que sea readonly="true".

Una vez que seleccionas una fecha revisa el código fuente de tu input para verificar que se esté llenando en el atributo value.

Saludos.

franfritz · #6 (**permalink**) 01/06/2012, 10:25

garciasanchezdani ocupé el focusout, pero no me funcionó.

quike88 estoy usando el datepicker de jquery.
Este es el código y tal como digo; no desaparece el mensaje al seleccionar una fecha.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
	Formulario
</title>
	<link href="css/estilo.css" rel="stylesheet" type="text/css" />
	<link href="css/custom-theme/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.json-2.2.js"></script>	
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	

	
    <script type="text/javascript" language="javascript">

	
         $("#fec_nac").focusout(function(){  //el id de tu input fecha es campofecha
                  if( $(this).attr('value') != '' )
				          $('#form1').validate();
         });	
	
	$(function(){
		$( "#fec_nac" ).datepicker();
		$('#region').change(function(){
				if($(this).val()!=''){
					$('#form1').validate();
					$('#comuna1').hide();
					$('#comuna2').show();
					$('#comuna2').load('comuna.php?region='+$(this).val());  
				}	
		});
	})	
	
	$(document).ready(function(){
        $('#form1').validate();
	});	
    </script> 
	
    </head>
<body>
<form method="post" action="" id="form1" name="form1">

    <div class="page">
            
                <div id="header"></div>
            
        

    <div id="MainContent_PanelGeneral">
	

            <table border="1" style="width: 100%;" cellpadding="2" cellspacing="2" 
                class="bordes">
				<tr>
					<td rowspan="7" style="width: 60px">
						<img id="MainContent_Image1" src="img/1.png" />
                    </td>
					<td style="width: 300px">
                      <label for="rut">  R.U.T * </label>
					</td>
					<td>
					
					<input type="text" name="rut" id="rut" class="rut required" maxlength="10" style="width:150px;">
						
					</td>
				</tr>
				<tr>
					<td>
						Nombres *
					</td>
					<td>
						<input type="text" name="nombres" id="nombres" class="required" maxlength="50" style="width:250px;">
					</td>
				</tr>
				<tr>
					<td>Apellido Paterno *</td>
					<td>
						<input type="text" name="paterno" id="paterno" class="required" maxlength="50" style="width:250px;">
					</td>
				</tr>
				<tr>
					<td>Apellido Materno *</td>
					<td>
						<input type="text" name="materno" id="materno" class="required" maxlength="50" style="width:250px;">
					</td>
				</tr>
				<tr>
					<td>
						Fecha Nacimiento *</td>
					<td>
					<input type="text" name="fec_nac" id="fec_nac" class="required"/>
					</td>
				</tr>

			</table>
            <br />
            <table cellspacing="0" cellpadding="2" border="0" style="width: 100%">
                <tr>
                    <td colspan="3" style="text-align: right">
                        <input type="submit" value="Enviar Formulario" id="MainContent_btnGrabar" style="height:26px;" />
                    </td>
                </tr>
			</table>

	</div>
            

	</div>

</div>

    </div>
 </form>
</body>
</html>

garciasanchezdani · #7 (**permalink**) 01/06/2012, 10:41

Hola, tal y como tienes el código, coge $(document).ready(function(){ y colócalo justo en la primera línea después del script:

Código Javascript:

Ver original<script type="text/javascript" language="javascript">
$(document).ready(function(){
    
$("#fec_nac").focusout(function(){

Eso resolverá tu problema, ya que lo he probado en local

Saludos, Daniel

franfritz · #8 (**permalink**) 01/06/2012, 11:42

garciasanchezdani muchas gracias. Pero sabes no me funciona. Estoy probando en firefox 12.0.
Dejé así el código:

Código PHP:

      <script type="text/javascript" language="javascript">

    $(document).ready(function(){

     $("#fec_nac").focusout(function(){  

              if( $(this).attr('value') != '' )

                      $('#form1').validate();

     });        

    });

El mensaje desaparece a la 2da vez que selecciono una fecha.

quike88 · #9 (**permalink**) 01/06/2012, 13:13

Prueba reemplazando esta linea:

Código PHP:

Ver original$( "#fec_nac" ).datepicker();

Por esto:

Código PHP:

Ver original$("#fec_nac").datepicker({
    onClose: function(dateText, inst) { 
        $("#form1").valid(); 
   }
});

Saludos!

franfritz · #10 (**permalink**) 01/06/2012, 14:22

Ahí si funcionó!!!.
Muchas gracias quike88.
También gracias garciasanchezdani.
Gracias por su tiempo.
Saludos.