Validar fecha antes de buscar jquery

[plitre_sys19]

Hola, escribo en esta oportunidad porque estoy tratando de mostrar un label de error en un dtpicker, me explico tengo este código:

Código:

<div class="col-md-2">
<label for="fecha">Fecha:</label>
<div class="input-group">
<input type = "text" id = "fecha" name="fecha" class="form-control" readonly />
<span class="input-group-addon fecha"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>

pero cuando valido que el campo no este vacio me sale asi, el span donde está el calendario se estira y no quiero eso, en este link Ejemplo que dejo se ve lo que pasa, como puedo hacer para cuando le de buscar la parte de ‘Debe seleccionar una fecha’ quede abajo del input y del calendario?

[Alexis88]

Si estás trabajando con un formulario, tan solo añádele el atributo required.

Saludos

[plitre_sys19]

Iniciado por Alexis88

Si estás trabajando con un formulario, tan solo añádele el atributo required.

Saludos

Hola Alexis88 gracias por responderme, probe con required y le quite la parte de validación con js pero no me funciona, creo que es porque el input esta readonly pero no puedo cambiar eso porque debe de estar deshabilitado, como podría hacer para que funcione?

[Alexis88]

Es un poco extraño lo que mencionas de que el <span> en donde se muestra el mensaje, se 'estire'. Muéstranos el código que elaboraste para eso y así podremos identificar el problema.

Saludos

[plitre_sys19]

Este es el código que estoy utilizando en el formulario:

Código PHP:

  <div class="row">
<div class="col-xs-12">
<form action="#" method="POST" id="campos" role="form">
<div class="col-md-2">
<label for="fechaP">Fecha Desde:</label>
<div class="input-group">
<input type = "text" id = "fechaP" name="fechaP" class="form-control" readonly />
<span class="input-group-addon fecha1"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div> 
   

y este es en el jquery:

Código:

$('# campos ').validate({
	  	rules:{
	  		fechaD:{required:true}
	  	},
	  	messages:{
	  		fechaD: 'Debe Seleccionar una Fecha'
	  	}

	});

[GeekGirl]

Esos espacios en el código están así o se pusieron al copiar? El input no debe llevar espacios en la definición de sus atributos. Debería ser:

Código HTML:

<input type="text" id="fechaP" name="fechaP" class="form-control" readonly /> 

Y en cuanto al jQuery, pasa lo mismo. Debería ser:

Código Javascript:

$('#campos').validate({
        rules:{
          fechaD:{required:true}
        },
        messages:{
          fechaD: 'Debe Seleccionar una Fecha'
        }
    });
 

En cuanto al required tenés razón: no funciona si el input es de tipo readonly ya que se asume que al ser sólo de lectura van a tener un valor asignado.
Saludos

[plitre_sys19]

los espacios en blanco se generaron al copiar, lo modifique como lo escribiste pero igual me siguen saliendo así cuando valido :(