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
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..
<input type="text" onkeyup="addDateSeparator(event,this,'dd/mm/yyyy') onBlur="return CheckDateFormat(this)" />
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..
<input type="text" onkeyup="addDateSeparator(event,this,'dd/mm/yyyy') onBlur="return CheckDateFormat(this)" />
Interesting. Your instructions look clear but I'm not very good at this so I hope this will work well for me. Thanks for the tips!Reading this article was an experience. I enjoyed all the information you provided and appreciated the work you did in getting it written.
ReplyDeleteIt was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing such informative post.
ReplyDeleteI hope you will keep in submitting new articles or blog posts & thank you for sharing your great experience among us.
ReplyDeleteI don’t know how I should give you thanks for making us aware about this important information! I am totally stunned by your article. You saved my time I would have wasted by browsing for same information on internet. Thanks a million for sharing this article.
ReplyDelete