Date Validation using JQuery Validation

I'm trying to validate date using jquery validation. Included Javascript Library is:

<script type="text/javascript" src="<?php echo base_url()?>asset/jqueryui/ui/ui.core.js">开发者_开发问答</script>
<script type="text/javascript" src="<?php echo base_url()?>asset/jqueryui/ui/ui.datepicker.js"></script>
<script src="<?php echo base_url()?>asset/jquery/jquery.metadata.js" type="text/javascript"></script>
<script src="<?php echo base_url()?>asset/jqvalidate/jquery.validate.js" type="text/javascript"></script>

Supposed I have 3 input field. name, address, and date of bird and I use errorContainer to display error.

my javascript is:

<script type="text/javascript">
    $().ready(function() {
        var errorContainer = $('div.errorContainer');
        // validate the form when it is submitted
        var validator = $("#frm").validate({
            errorContainer: errorContainer,
            errorLabelContainer: $("ol", errorContainer),
            wrapper: 'li',
            meta: "validate",
            rules: {
                datepicker: {
                    required: true,
                    date: true
                }
            }
        });
    });

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

<form id="frm">
    <input type="text" id="name" name="name" class="field text {validate:{required:true}}">
    <input type="text" id="address" name="address" class="field text {validate:{required:true}}">
    <input type="text" id="datepicker" name="datepicker">
    <input type="submit">
</form>

but it doesn't work for date validator.

Got it

<input type="text" id="datepicker" name="datepicker" class="{validate:{required:true, date:true}}">

I assume you are using this jQuery validate. If you see inside the jquery.validate.js file or the included example, there are several build in rules for date. You can read the documentation in http://docs.jquery.com/Plugins/Validation/Methods/date.

If your input have different date format, or you want to make sure the date is an actual date, then you can build your own rule. Inside the zip file, there are additional-methods.js file. You can learn from it, then creating your own rules.

Add class date to your date element and try. It should work. jQuery validate plugin works on css classes attached to elements.

This is an old thread, but I thought this noob might chime in to help anyone else who comes by. I was able to make a custom validation method to determine if a date is accurate. Didn't want to have to add another library, so I went with pure javascript and jquery:

02/29/2008 = good

02/29/2007 = bad

Here is the essence of the code:

$("#submit").click(function() {
  var form = $("#validationtest");
  form.validate();
  if (form.valid() == false) {
    alert("Initial Data Incomplete");
  } else {
    alert("Good data!");
  }
}); 

$.validator.addMethod("AccurateDate", function(value) {
  var checkdate = $("#dob").val();
  var rawmonth = checkdate.substr(0,2);
  var rawday   = checkdate.substr(3,2);
  var rawyear  = checkdate.substr(6,4);
  var checkdate = new Date( $("#dob").val());
  return ( (rawmonth == checkdate.getMonth()+1) &&
      (rawday == checkdate.getDate()) &&
      (rawyear == checkdate.getFullYear())
  );
}, "Not a real date");
$.validator.classRuleSettings.AccurateDate = {AccurateDate: true};

$("form").validate({
    debug: true, //change to false when going into production
    rules: {
        name: {required: true, minlength: 2 },
        address: { required: true },
        dob: {required: true, AccurateDate: true},
        zipcode: {
            required: true,
            digits: true,
            minlength: 5
        }
    },
    messages: {
        name: {
            required: " Name required",
            minlength: " Name must be 2 characters"
        },
        address: { required: " Address required" },
        dob: { required: " Date of Birth Required" },
        zipcode: {
            required: " Zipcode required",
            digits: " Only numbers accepted",
            minlength: " Five numbers are required."
        }
    }    
});

And it just points to four input elements. Again, I thank everyone on this site for helping me in the past - hopefully this might help someone else.

PS - I tried to put this on jsfiddle, but kept getting an error code something like "use POST" and couldn't figure out why. It works fine on my test website.

PSS - I just ran it with maskedinput.js and had to readjust the checkdate.substr to 0,3 4,2 and 7,4 - not sure why...