validate textbox for date of birth

Question

The below code is for validating a textbox for date of birth. The conditions are

Textbox can't be empty
Textbox date should be in format dd/mm/yyyy
Textbox date should not be larger than current date. ie; no future date (to show error like -U r not born yet dude)

<asp:TextBox ID="txtDateOfBirth" runat="server" CausesValidation="True" />
          (dd/mm/yyyy e.g. : 12/12/2011)
<asp:CustomValidator runat="server" ID="valDateRange" ControlToValidate="txtDateOfBirth" ErrorMessage="enter valid date" />

But the problem is that, the textbox is inside an ajax wrapper so only client side validations will work. Anybody here, Plz help me with any hints, suggestions or with working code!!. I will be very great-full because i was working on this since morning

possible duplicate of [Javascript Date validation for mm/dd/yyyy format in asp.net](http://stackoverflow.com/questions/9062400/javascript-date-validation-for-mm-dd-yyyy-format-in-asp-net) — outis, Feb 20 '12 at 12:05
use jquery datepicker plugin. it can be customize as per your need.. also refer http://stackoverflow.com/questions/269545/jquery-datepicker-years-shown http://jqueryui.com/demos/datepicker/ — Hemang Rami, Feb 20 '12 at 12:09

score 3 · Answer 1 · answered Feb 20 '12 at 12:32

You could have a ClientValidationFunction property on your CustomValidator...

<asp:CustomValidator runat="server" ID="valDateRange" ControlToValidate="txtDateOfBirth" ErrorMessage="enter valid date" ClientValidationFunction="validateDate" />

Then create a Javascript function:

function validateDate(sender, e) {

    // Split out the constituent parts (dd/mm/yyyy)    
    var dayfield = e.Value.split("/")[0];
    var monthfield = e.Value.split("/")[1];
    var yearfield = e.Value.split("/")[2];

    // Create a new date object based on the separate parts
    var dateValue = new Date(yearfield, monthfield - 1, dayfield)

    // Check that the date object's parts match the split out parts from the original string
    if ((dateValue.getMonth() + 1 != monthfield) || (dateValue.getDate() != dayfield) || (dateValue.getFullYear() != yearfield)) {
        e.IsValid = false;
    }

    // Check for future dates
    if (e.IsValid) {
        e.IsValid = dateValue <= new Date()
    }
}

score 1 · Answer 2 · answered Feb 20 '12 at 14:30

I agree with varangian_12's answer, but be sure to also do some sort of server-side validation for the off-case that your user has Javascript disabled, or disables it to get around your validation

You could do a simple DateTime.TryParse([string value]) and then check to ensure the date occurs in the past

You just need to be sure to handle the edge-case scenarios

score 0 · Answer 3 · answered Feb 20 '12 at 12:38

No need to use valodators, use requiredfieldvalidator for checking if not empty and use jquery date picker to make the field have a date calendar when get focus,

here is an example it is very easy, if u need any help please let me know: http://jqueryui.com/demos/datepicker/

score 0 · Answer 4 · answered Feb 21 '12 at 06:05

You should try this .i will run perfect. you can also used "jquery.validate.js" for make Textbox can't be empty. also in css you have to create a class error

having color red.

 <p>   type="text/css" media="all" /></p>
<p><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script></p>

   <p>   type="text/javascript"></script></p>
 <p> <script type="text/javascript"></p>
<p>    $(function () {</p>
  <p>        var minDate = new Date('1/1/1990');</p>
     <p>    var todaysDate = new Date();</p>
     <p>    var maxDate = new Date(todaysDate.getFullYear(),</p>
        <p>                    todaysDate.getMonth(),</p>
             <p>               todaysDate.getDate() - 1);</p>
       <p>  var currentsYear = todaysDate.getFullYear();</p>

        <p> var range = '1900:' + currentsYear</p>
    <p>      $('#txtDOB').datepicker({</p>
     <p>         minDate: minDate,</p>
       <p>       maxDate: maxDate,</p>
       <p>       changeMonth: true,</p>
       <p>       changeYear: true,</p>
       <p>       yearRange: range</p>
      <p>    });</p>
  <p>    });  </p>

validate textbox for date of birth

4 Answers4