breaking into the unknown…

jQuery datpicker with date of Birth validation

1 Comment

We often have date element in our forms, like for entering date of birth, joining date, delivery date etc. We provide, the user with a calender to enter the date. A number of plugin available out there for entering date to form input. But, We will use datepicker plugin of jQuery here. We will then validate the date enter by the user on the form submit. Note, that a date selected from datepicker is always a valid date fromat, but user can change it manually in the text box if he want and enter some wrong date… testing person always do it🙂

Lets below is our simple form with one input field with id = dob and a submit button.

   <label>Your Date of Birth</label>
   <input type="text" value="" id="dob" />
   <input type="submit" value="Submit" id="form-submit" />

We will going to validate date for its correct format (assuming dd-mon-yyyy format) and other things like, it should not be less than the current date.

  //attach the datepicker to input with id dob after page load
  //yearRange will determine no of years to show in year select box. currently it will list 100 year 
  from now .  setting changeMonth and changeYear to true will show month and year box in calender, 
  otherwise user will able to select day only.The format given here means date should be like 
  13-May-2013. all possible format is available here

          yearRange: "-100:+0",
          changeMonth: true,
          changeYear: true,
          dateFormat : "d-M-yy",
          # onchangeMonthYear code below will refelct the date change as soon as user
           change year or month.If you do not use it date will cahnge only after
           select a day
          onChangeMonthYear: function(year, month, day){
            $(this).datepicker('setDate', new Date(year, month-1, "1"))
            var selectedDate = '1';
                selectedDate = $(this).datepicker('getDate').getDate();
            $(this).datepicker('setDate', new Date(year, month-1, selectedDate));


  // defining the function doing the date validation .our date format should be like 13-May-2013
  var validated_dob = function(dob){
             var dob_split = dob.split("-") #split the dob string into array
             var validated = "Yes"
             var msg = "Date of Birth is valid"
             var month_array = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]

             // make sure that day year and month entered or return
             if(dob_split.length != 3){
                            validated = "NO"
                            msg = "Date of Birth must be entered in this format: DD-MON-YYYY"
                            return [validated, msg]

             // make sure that day month and year in DD-MON-YYYY format
            if ((dob_split[2].length != 4) || (dob_split[1].length != 3) || 
                                 !(dob_split[0].length == 2 || dob_split[0].length == 1)){
                            validated = "NO"
                            msg = "Date of Birth must be entered in this format: DD-MON-YYYY"
                            return [validated, msg]

             // make sure that day month have only integer
             if((!(/^[0-9]+$/).test(dob_split[0])) || (!(/^[0-9]+$/).test(dob_split[2]))){
                           validated = "NO"
                           msg = "Date of Birth day and year can have only numeric value"
                           return [validated, msg]

             // make sure that day is in range 1-31
             if(dob_split[0] > 31 || dob_split[0] <= 0){
                            validated = "NO"
                            msg = "Date of Birth day should have value in 1-31"
                            return [validated, msg]

            // make sure that month entered as Jan Feb etc
            if($.inArray(dob_split[1],month_array ) < 0){
                           validated = "NO"
                           msg = "Date of Birth month should be in ['Jan', 'Feb', 'Mar', 'Apr', 'May', 
                                                    'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]"
                           return [validated, msg]

           // these variable are defined here instead of top because datepicker
           // can parse only a valid date, so if date is wrong it will throw error
           var user_dob =$.datepicker.parseDate("d-M-yy", dob)
           var today_date = new Date()
           if(user_dob > today_date){
                           validated = "NO"
                           msg = "Your Date of Birth can't be less than Today's Date"
                           return [validated, msg]

           // if all condition pass, return original value at top
           return [validated, msg]

       // validate the date on form submit
              // collect value return by validated_dob in a variable
              var check_dob = validated_dob(dob)
              // if validation return No, alert the error message and return
              //false i,e prevent the form from submit
              if (check_dob[0] == "NO"){
                            return false

Referance: # will tell you all type of data in jquery # detail on jQuery array # matching a element in array, will return -1 if no element matched or index of element if matched # list method for traversing dom # detail documentation of datepicker

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

One thought on “jQuery datpicker with date of Birth validation

  1. Thank you For Sharing The Nice Tutorial .

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s