Pages

How to Add Validation for Date using JavaScript, How to Check Date is valid or not using JavaScript

Monday 28 April 2014

How to Add Validation for Date using JavaScript, How to Check Date is valid or not using JavaScript




How to Add Validation for Date using JavaScript, How to Check Date is valid or not using JavaScript

This tutorial for checking the entered Date into the Textbox  format is valid or not using JavaScript, This will help you to add the validation on date fields into your form and can be validate the date format before sending it to the server in client side...

Try Demo by typing the wrong date format when you type the wrong date format it will alert you ....

Try Demo from Here  


<script type="text/javascript" >

function addDateSeparator(e, control, format){

        this.Format = format;
        var keycode = (e.which) ? e.which : event.keyCode

        if (keycode > 31 && (keycode < 48 || keycode > 57)){
                return false;
        }else{

                var DateFormatPattern = /^dd\/mm\/yyyy$|^mm\/dd\/yyyy$|^mm\/dd\/yyyy$|^yyyy\/mm\/dd$/;
                if ( DateFormatPattern.test(this.Format) ){

                        var SplitFormat = this.Format.split("/");
                        if ( control.value.length  >= this.Format.length ){

                                if ( keycode !=8){
                                        return false;
                                }
                        }
                        if ( control.value.length == SplitFormat[0].length ){

                                if ( keycode !=8){
                                        control.value += '/';
                                }
                        }
                        if ( control.value.length == (SplitFormat[1].length + SplitFormat[0].length +1) ){

                                if ( keycode !=8){
                                        control.value += '/';
                                }
                        }
                }else{
                        alert("Supplied date format parameter is incorrect.");
                }
        }
}
function CheckDateFormat(val)
{
 if(val.value!="")
 {
 if(val.value.length <10)
    {
        val.value = "";
        alert("Incomplete Date");
        setTimeout(function(){val.focus();},1);
        return;
    }

    var skills = val.value.split("/");
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1;
    var yyyy = today.getFullYear();
    var skills1 = val.value.split("/");

    if(val.value == "" || (skills1[0] >31 || skills1[1] >12 || skills1[2] < 2001 || skills1[2] > 2050))
    {
        val.value = "";
        alert("Invalid Date");
        setTimeout(function(){val.focus();},1);
        //date.focus();
        return;
    }
    if((skills1[2]%4 != 0) && skills1[1] == 2 && skills1[0] >=29)
    {
        val.value = "";
        alert("Invalid Date");
        setTimeout(function(){val.focus();},1);
        //date.focus();
        return;
    }
    if((skills1[2]%4 == 0) && skills1[1] == 2 && skills1[0] >=30)
    {
        val.value = "";
        alert("Invalid Date");
        setTimeout(function(){val.focus();},1);
        //date.focus();
        return;
    }
    if((skills1[1]== 4 || skills1[1]== 6 || skills1[1]== 9 || skills1[1]== 9) && skills1[0] > 30)
    {
        val.value = "";
        alert("Invalid Date");
        setTimeout(function(){val.focus();},1);
        //date.focus();
        return;
    }
 }
}
</script>

The above code is tested and you just need to call the CheckDateFormat and addDateSeparator function on onBlur and onKeyUp event respectively of a Textbox on which you want to validate the date like this..

No comments:

Post a Comment