jquery validation date

Question

How can I validate date format before I submit the form? I tried to do the following. However, it does not work.

  <p> Date: <br />
  <input type="text" id="date" name="date">
  </p>

<input type="submit" id="submit" value="Send" />

</fieldset>


</form>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script>
 $(function() {

    $('#submit').click(function() {
     $.validator.addMethod(
     "DateFormat",
     function(value, element) {
     return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
     },
      "Please enter a date in the format dd/mm/yyyy";
     );

      // validate and process form here
     $('#contact').validate({
        rules :
        date: {
        DateFormat : true
       }
     });

      var dataString = $('form[name="contact"]').serialize();

      $.ajax({
       type: "POST",
       data: dataString,
       url : "ajax.php",
     });

   });
  });

</script>

Try putting your JQuery code in code tags so it's easier for us to read. — Jules
– Jules, Commented Jul 6, 2011 at 14:51
I loaded them: <script type="text/javascript" src="ajax.microsoft.com/ajax/jquery.validate/1.7/…> <script type="text/javascript" src="code.jquery.com/jquery-1.4.2.min.js"></script> — chnet
– chnet, Commented Jul 6, 2011 at 14:53

Nicola Peluchetti · Accepted Answer · 2011-07-06 15:38:11Z

3

You should load jquery before the plugin like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

Otherwise the validation plugin won't work.

EDIT - you had some errors in your javascript code, here is a working fiddle http://jsfiddle.net/Eu8eS/1/

working code:

$(function() {

    $('#submit').click(function() {
     $.validator.addMethod(
     "DateFormat",
     function(value, element) {
     return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
     },
      "Please enter a date in the format dd/mm/yyyy"//removed ;
     );

      // validate and process form here
     $('#contact').validate({
         rules :{//added here {
        date: {
        DateFormat : true
         }
       }//added here }
     });

      var dataString = $('form[name="contact"]').serialize();

      $.ajax({
       type: "POST",
       data: dataString,
       url : "ajax.php",
     });

   });
  });

edited Jul 6, 2011 at 15:38

answered Jul 6, 2011 at 15:11

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

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

2 Comments

Nicola Peluchetti Over a year ago

you had errors in your code, check the fiddle and my corrections

Phil Over a year ago

oops this wasn't here when I posted, :D

Phil · Accepted Answer · 2011-07-06 15:39:38Z

0

I would suggest you use the submit() and not the click on the button as you can place preventDefault and return false in the function to stop the button from submitting.

So:

if(validation is false) { return false }

Also, there appears to be a few syntax errors. Try using firebug (Every browser but IE) and fix those before moving forward.

answered Jul 6, 2011 at 15:39

Phil

11.2k18 gold badges73 silver badges106 bronze badges

Collectives™ on Stack Overflow

jquery validation date

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related