Date Validation For Birth Date, Joining Date And Leaving Date

I have three textboxes for BirthDate, JoiningDate & LeavingDate. Now what I want is:- Joining date and Leaving date should not be greater than Birthdate Leaving Date should no

Solution 1:

Demo

Validation function

var validateData = function () {
    var bday = $('#birthdate').val();
    var jday = $('#joiningdate').val();
    var lday = $('#leavingdate').val();

    if (bday && jday && bday > jday) {return}
    if (bday && lday && bday > lday) {return}
    if (jday && lday && jday > lday) {return}

    returntrue;
};

is called onClose event of datepicker, after what error message can be displayed. Feel free to change error displaying method.

    onClose: function () {
        validateData() ? $('#errormsg').hide() : $('#errormsg').show();
    }

Update

To add some css to error message add class to it like

<div id="errormsg" class="error-msg">Invalid date</div>

And then you can move display: none; to your css

Update

Demo for required fields

Solution 2:

Completed JS Fiddle is here

First up let me assume that you actually meant the following

• Joining date should not be less than Birthdate
• Leaving Date should not be less than Joining Date and BirthDate

and not the other way around, please correct me if I am wrong.

Now going for the solution, you can achieve this by using jQuery Validation Plugin. Simply add a custom validation function to the plugin and validate the form against it. Please see the sample code

<form id="myForm">
    <p>Date Of Birth:
        <input type="text" name="datepicker_dob"id="datepicker_dob" />
    </p>
    <p>Date Of Joining:
        <input type="text" name="datepicker_doj"id="datepicker_doj" />
    </p>
    <p>Date Of Leaving:
        <input type="text" name="datepicker_dol"id="datepicker_dol" />
    </p>
    <button type="button"id="saveButton">Save</button>
</form>

Initialize your Datetime picker like this

$(document).ready(function() {
    $("[id$=datepicker_dob],[id$=datepicker_doj],[id$=datepicker_dol]" ).datepicker({
       // add this option when you initialise the datetime picker, this will// validate date based on our custom validation rule when we select a date onSelect:function(){
            $(this).valid(); 
        }
    });
});

Next up is adding a custom validator function

$.validator.addMethod("dateValidatorLE", function(value, element, params) {

    var isDateValid = true;
    $(params).each(function(i) {
      //  alert($(params[i]).val());
        isDateValid &= (Date.parse(value) > Date.parse($(params[i]).val()))
    });
    returnthis.optional(element) || isDateValid;
}, $.validator.format('general error message'));

The validate your form

$('#myForm').validate({rules: {
        datepicker_doj: {
            dateValidatorLE: ['#datepicker_dob']
        },        
        datepicker_dol: {
            dateValidatorLE: ['#datepicker_dob', '#datepicker_doj']
        }
    },messages: {
        datepicker_doj: {
            dateValidatorLE:'DOJ must be greater than DOB'
        },        
        datepicker_dol: {
            dateValidatorLE:'DOL must be greater that DOJ and DOB'
        }
    },onkeyup:function(e) {
      this.element(e);
    }
});

Let me know if this is helpful to you.

Solution 3:

I don't really get how you want your code to look. Anyways, it's a simple validation that you can put in a function if you want :

functionvalidateMyForm() {
    return ($('#txtdoj').val() <= $('#txtdateofbirth').val() 
        && $('#txtdol').val() <= $('#txtdateofbirth').val() 
        && $('#txtdol').val() <= $('#txtdoj').val() 
        && $('#txtdol').val() <= $('#txtdateofbirth').val());
}

This will return true if the form is valid or false if it's not