Jquery form validation not working after insert datepicker

Question

I want to create a booking (reservation) form with datepicker textfield, name, contact and bla bla bla.

The validation works fine while my form got the name input textfield, email input textfield, contact input textfield and except the datepicker.

After I insert the jquery datepicker, the validation is not working and the datepicker works fine.

Can anyone pls give me a help?

<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

just add the onClose in datepicker

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

Answer 2

The problem with your code is that your jquery library and prototype libraries are conflicting.

Many JavaScript libraries use '$' as a function or variable name, just as jQuery does. Here jquery and prototype libraries are conflicting over '$' . In jQuery's case, '$' is just an alias for 'jQuery'. To fix this add jquery in no conflict mode.

jQuery.noConflict();

Include all your jquery code as below :

(function($) {    

     //jquery code goes here.    

})(jQuery);

See the complete code :

<script type="text/javascript">

jQuery.noConflict();

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

</script>

The above procedure will ensure that jquery does not conflict with your other library ,i.e, prototype in this case.

Answer 3

You just need to make the request a Post request rather that the Get request. When You are using the Form you want to send the Data from the Form to the Server That may process the Data and Hence it has to be POST and not Get. I guess that's that's the only change that you need to do in order to make your validations work. Check this JsFiddle Out: The Solution

Answer 4

Load JQuery first, then namespace it, then load Prototype. As others pointed out, you namespace JQuery with the noConflict function:

<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>

Did not test it but it should work that way... good luck

Answer 5

I scrolled through the answers here, and agree with the others, jQuery.noConflict() is needed. It looks like your using prototype and jquery. Which have conflicting Syntax. Since you call jQuery in after you call prototype, your in a sense overriding prototype with jquery.

Taking from dipali's answer.. if you use this

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

and replace this (from your original post):

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

both prototype and jquery will work in harmony. Also note any futher jquery you do on your page will require $j in front of it instead of just $

Answer 6

to fix this I replaced my implementation of jQuery datepicker with the one here http://keith-wood.name/uiDatepickerValidation.html

which is just an extension of the jquery datepicker but with extra validation which works excellently.

Excellent library!

Answer 7

After I insert the below code in my datepicker function, datepicker format doesn't work and JQuery validation works fine:

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

Answer 8

JQuery and Prototype might be clashing over '$'.

Try:

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