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. [email protected]" /></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>

you mean, prototype validation not working when used with jQuery datepicker! — ifaour
– ifaour, Commented Jan 2, 2011 at 18:14

himanshu dhiman · Accepted Answer · 2012-02-09 06:27:15Z

10

+50

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.

edited Feb 9, 2012 at 6:27

answered Feb 3, 2012 at 11:16

himanshu dhiman

2931 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fncomp Over a year ago

I think It ensures that more than one jquery library can be used simultaneously. should be Prevents jQuery from becoming window.$. At least in previous versions you couldn't load more than one JQuery, but there was noConflict. (It was on of Resig's goals in 2007 though, see: video.google.com/videoplay?docid=-474821803269194441)

user463535 · Accepted Answer · 2011-01-02 17:38:57Z

6

JQuery and Prototype might be clashing over '$'.

Try:

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

answered Jan 2, 2011 at 17:38

user463535

1 Comment

circusdei Over a year ago

ran into this problem before. above fixed it.

adarshr · Accepted Answer · 2012-02-02 09:22:12Z

4

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>

edited Feb 2, 2012 at 9:22

adarshr

62.8k24 gold badges146 silver badges175 bronze badges

answered Feb 24, 2011 at 5:41

dipali

411 bronze badge

Comments

tmaximini · Accepted Answer · 2012-02-07 11:41:18Z

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

Somedeveloper · Accepted Answer · 2012-02-02 12:04:00Z

1

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!

answered Feb 2, 2012 at 12:04

Somedeveloper

8652 gold badges15 silver badges32 bronze badges

Comments

chris · Accepted Answer · 2012-02-04 21:29:11Z

1

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 $

answered Feb 4, 2012 at 21:29

chris

37k54 gold badges149 silver badges256 bronze badges

Comments

user1195922 · Accepted Answer · 2012-02-07 23:34:09Z

1

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

answered Feb 7, 2012 at 23:34

user1195922

891 gold badge1 silver badge3 bronze badges

Comments

Mohammad Lorgat · Accepted Answer · 2016-05-31 08:16:45Z

0

just add the onClose in datepicker

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

answered May 31, 2016 at 8:16

Mohammad Lorgat

1

Collectives™ on Stack Overflow

Jquery form validation not working after insert datepicker

8 Answers 8

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related