Using JQuery Validtor plugin with datepicker

Creates datepicker on birthday field and validates according to a custom date format.

by andfinally

HTML

<input id="birthday" name="birthday" type="text" />
<input id="familyName" name="familyName" type="text" />

JavaScript

// Custom date rule for validator
$.validator.addMethod(
    "customDateFormat",
    function(value, element) {
        // put your own logic here, this is just a (crappy) example
        //return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
        return value.match(/^\d\d\d\d-\d\d?-\d\d?$/);
    },
    "Please enter a date in the format yyyy-mm-dd"
);

$(document).ready(function() {

    // Initialise datepicker
    $("#birthday").datepicker({onSelect:function(){$('#updateUser').validate().element(this);},dateFormat:'yy-mm-dd',showOptions:{direction:'up'}});

    var validator = $('#updateUser').validate({
        rules: {
            birthday: {
                 customDateFormat: true
            },
            familyName: {
                required: true
            }
        },
        messages: {
             familyName: {
                 required: "Please tell us your surname"
             }
        }
    });

    $('#birthday').blur(function(){
       $('#updateUser').validate().element(this);
    });

});