La validación del formulario Jquery no funciona después de insertar datepicker

Question

Quiero crear un formulario de reserva (reserva) con datepicker textfield, name, contact y bla bla bla.

La validación funciona bien, mientras que mi formulario tiene el campo de texto de entrada de nombre, campo de texto de entrada de correo electrónico, campo de texto de entrada de contacto y excepto el marcador de fecha.

Después de insertar el jquery datepicker, la validación no funciona y el datepicker funciona bien.

¿Alguien me puede ayudar por favor?

<script src="js/prototype.js" type="text/javascript"></script> 
<script src="js/validation.js" type="text/javascript"></script> 
<script src="js/effects.js" type="text/javascript"></script> 

<link rel="stylesheet" type="text/css" href="css/style.css" /> 

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script> 
<link type="text/css" href="css/start/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
<script> 
$(function() { 
$("#datepicker").datepicker(); 
}); 
</script> 


<form id="test" action="#" method="get"> 
<fieldset> 
    <!--<legend>Form</legend>--> 
    <div class="form-row"> 
     <div class="field-label"> 
      <label for="name-t2">*Your Name:</label> 
      </div> 
     <div class="field-widget"><input name="name-t2" id="name-t2" class="required" title="Enter your name" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="email-t2">*Your Email:</label></div> 
     <div class="field-widget"><input name="email-t2" id="email-t2" class="required validate-email" title="Enter a correct email. E.g. xx@example.com" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="contact-t2">Contact Number:</label></div> 
     <div class="field-widget"><input name="contact-t2" id="contact-t2" class="validate-digits" title="Enter your contact number" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="datepicker">Departure Date:</label></div> 
     <div class="field-label"> 
      <input id="datepicker" name="datepicker" class="required validate-date-au" type="text" /> 
     </div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="ppl-t2">Number of People:</label></div> 
     <div class="field-label"><input name="ppl-t2" id="ppl-t2" class="validate-number" title="Optional: Enter number of people" /></div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="budget-t2">Your Budget:</label></div> 
     <div class="field-widget"> 
      <select id="budget-t2" name="budget-t2" class="validate-selection" title="Choose your budget"> 
       <option>Select one...</option> 
       <option>< $100</option> 
       <option>$100 - $250</option> 
       <option>$250 - $500</option> 
       <option>$500 - $750</option> 
       <option>$750 - $1,000</option> 
       <option>> $1,000</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-row"> 
     <div class="field-label"><label for="enquiry-t2">Special Enquiry:</label></div> 
     <div class="field-label"> 
     <input type="checkbox" name="enquiry-t2" id="enquiry-travel" value="Travel" />Travel<br> 
      <input type="checkbox" name="enquiry-t2" id="enquiry-accommadation" value="Accommodation" />Accommodation<br> 
      <input type="checkbox" name="enquiry-t2" id="enquiry-flight" value="Flight Ticket" />Flight Ticket<br> 
      <input type="checkbox" name="enquiry-t2" id="enquiry-other" value="Others" class="validate-one-required" />Others 
     </div> 
    </div> 

    <div class="form-row"> 
     <div class="field-label-textarea"><label for="comment-t2">Your Message:</label></div> 
     <div class="field-label-textarea"> 
       <TEXTAREA NAME="comment-t2" id="comment-t2" class="required" cols=55 rows=10></TEXTAREA> 
     </div> 
    </div> 

</fieldset> 
<input type="submit" value="Submit" /> <input type="button" value="Reset" onClick="valid.reset(); return false" /> 
</form> 

<script type="text/javascript"> 
var valid2 = new Validation('test', {useTitles:true}); 
</script> 

Answer 1

JQuery y Prototype podrían estar chocando sobre '$'.

Probar:

<script type="text/javascript"> 
     var $j = jQuery.noConflict() 
     $j(function() { 
       $j("#datepicker").datepicker(); 
      }); 
</script> 

Answer 2

Después de insertar el código de abajo en mi función de selector de fecha, formato de selector de fecha no funciona y validación jQuery funciona bien:

<script type="text/javascript"> 
    var $j = jQuery.noConflict() 
    $j(function() { 
      $j("#datepicker").datepicker(); 
     }); 
</script> 

Answer 3

carga jQuery primero, luego espacio de nombres, luego carga Prototype. Como otros señalaron, que jQuery espacio de nombres con la función noConflict:

<link rel="stylesheet" type="text/css" href="css/style.css" /> 

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script> 
<link type="text/css" href="css/start/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 

<script type="text/javascript"> 
var myJQ = JQuery.noConflict(); 
</script> 

<!-- now load Prototype --> 
<script src="js/prototype.js" type="text/javascript"></script> 
<script src="js/validation.js" type="text/javascript"></script> 
<script src="js/effects.js" type="text/javascript"></script> 

<!-- now you can't use $ anymore for JQuery, but you can use 'myJQ' --> 
<script> 
myJQ(function() { 
myJQ("#datepicker").datepicker(); 
}); 
</script> 

No probarlo pero debería funcionar de esa manera ... buena suerte

Answer 4

para solucionar este reemplacé mi implementación de jQuery selector de fechas con el de aquí http://keith-wood.name/uiDatepickerValidation.html

que es solo una extensión del jquery datepicker pero con validación adicional que funciona de manera excelente.

Excelente biblioteca!

Answer 5

El problema con su código es que su biblioteca jquery y las bibliotecas de prototipos están en conflicto.

Muchas bibliotecas de JavaScript usan '$' como una función o nombre de variable, al igual que jQuery. Aquí las bibliotecas de jquery y prototipo están en conflicto con '$'. En el caso de jQuery, '$' es solo un alias para 'jQuery'. Para arreglar esto, agregue jquery en modo no conflictivo.

jQuery.noConflict(); 

Incluir todo el código de su jQuery de la siguiente manera:

(function($) {  

    //jquery code goes here.  

})(jQuery); 

Ver el código completo:

<script type="text/javascript"> 

jQuery.noConflict(); 

(function($) { 
      $("#datepicker").datepicker(); 
})(jQuery); 

</script> 

El procedimiento anterior se asegurará de que jQuery no entra en conflicto con la otra biblioteca, es decir, , prototipo en este caso.

Answer 6

Me desplacé por las respuestas aquí, y estoy de acuerdo con los demás, jQuery.noConflict() es necesario. Parece que estás usando un prototipo y jquery. Que tienen una sintaxis conflictiva Ya que llamas a jQuery después de llamar al prototipo, en cierto sentido, anulas el prototipo con jquery.

Tomando de la respuesta de dipali.si se utiliza este

<script type="text/javascript"> 
var $j = jQuery.noConflict() 
$j(function() { 
     $j("#datepicker").datepicker(); 
    }); 

y reemplazar este (desde su puesto original):

<script> 
$(function() { 
$("#datepicker").datepicker(); 
}); 
</script> 

tanto prototipo y jQuery trabajarán en armonía. También tenga en cuenta que cualquier otro jquery que haga en su página requerirá $ j frente a él en lugar de solo $

Answer 7

Solo necesita hacer la solicitud de una solicitud Post en lugar de la solicitud Get. Cuando está utilizando el formulario que desea enviar los datos desde el formulario al servidor que puede procesar los datos y por lo tanto tiene que ser POST and not Get. Supongo que ese es el único cambio que debe hacer para que sus validaciones funcionen. Marque esta jsFiddle de salida: The Solution

Answer 8

sólo tiene que añadir el selector de fechas en onClose

$('#date').datepicker({ 
    onClose: function() { 
     $(this).valid(); 
    } 
});