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 not be greater than Joining Date and BirthDate

I have used the DatePicker.

Here is the JS code:-

$(function () {
        $("[id$=mainContent_txtdateofbirth], [id$=mainContent_txtdoj], [id$=mainContent_txtdol]").datepicker({
            textboxImageOnly: true,
            textboxImage: 'images/calendar.png',
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy / mm / dd",
            yearRange: "-40:+0",
            maxDate: new Date(),
        });
    });

The three textboxes are:-

<asp:TextBox ID="txtdateofbirth" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>
    <asp:TextBox ID="txtdoj" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>
    <asp:TextBox ID="txtdol" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox>

UPDATED ASPX CODE:-

<tr>
        <td style="vertical-align: top;">
            <label class="control-label" for="dob">Date of Birth</label></td>
        <td>
            <div class="control-group">
                <div class="controls">
                    <asp:TextBox ID="txtdateofbirth" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="reqdob" runat="server" CssClass="error-class" ControlToValidate="txtdateofbirth" ErrorMessage="Please select the date of birth" ValidationGroup="AddNew"></asp:RequiredFieldValidator>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td style="vertical-align: top;">
            <label class="control-label" for="subject">Date of Join</label></td>
        <td>
            <div class="control-group">
                <div class="controls">
                    <asp:TextBox ID="txtdoj" Wrap="true" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="reqdoj" CssClass="error-class" runat="server" ControlToValidate="txtdoj" ErrorMessage="Please add the date of joining" ValidationGroup="AddNew"></asp:RequiredFieldValidator>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td style="vertical-align: top;">
            <label class="control-label" for="subject">Date of Leaving</label></td>
        <td>
            <div class="control-group">
                <div class="controls">
                    <asp:TextBox ID="txtdol" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox>
                </div>
            </div>
        </td>
    </tr>

回答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}

    return true;
};

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

回答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()))
    });
    return this.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.

回答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 :

function validateMyForm() {
    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

来源：https://stackoverflow.com/questions/29434096/date-validation-for-birth-date-joining-date-and-leaving-date

标签

javascript

jquery

ASP.NET

date

datepicker