Date Validation using JQuery Validation

Question

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.

Answer 1

Got it

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

Answer 2

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.