Date Validation using JQuery Validation

Question

Hi ..., 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 doesnt work for date validator.

I need your help. thanks

Answer 1

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.

Answer 2

Got it

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

Answer 3

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