Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript Validate Date With JQuery And Date Object

Validate Date With JQuery And Date Object

This article gives a piece of JavaScript code to validate entered date (birthday for example) which is entered by a user. When the user enters an invalid date, such as abcdef, 99/99/9999 or 02/29/2011, a JavaScript popup appears with the validation message.

JQuery Validate Date With Date Object

Example below will use JQuery (which is downloaded from Google CDN) and Date object to validate.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Validate Date</title>
<meta name="robots" content="noindex, nofollow" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
</head>
 
<body>
<script language="javascript">
function validate()
{
	var strDate = jQuery("#txtDate").val();
	strDate = jQuery.trim(strDate);
 
	var arrDate = strDate.split('/');
 
	var day = parseInt(jQuery.trim(arrDate[1]), 10);
	var month = parseInt(jQuery.trim(arrDate[0]), 10);
	var year = parseInt(jQuery.trim(arrDate[2]), 10);
 
 
	var date = new Date(year, month-1, day);
	var convertedDate = "" + date.getFullYear() + (date.getMonth()+1) + date.getDate();
	var givenDate = "" + year + month + day;
 
	if(givenDate == convertedDate)
	{
		alert("The given date is VALID!");
		return true;
	}
	else
	{
		alert("The given date IS NOT VALID!");
		return false;
	}
}
</script>
<table>
	<tr>
		<td align="left">Enter a Date in the text box then click Validate button:</td>
	</tr>
	<tr>
		<td><input type="text" id="txtDate" name="txtDate" style="width:200px;" value="02/29/2011" /> (mm/dd/yyyy)</td>
	</tr>
	<tr>
		<td><input type="button" id="btnValidate" value="Validate" onclick="return validate();" /></td>
	</tr>
</table>
 
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery Validate Date</title> <meta name="robots" content="noindex, nofollow" /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> </head> <body> <script language="javascript"> function validate() { var strDate = jQuery("#txtDate").val(); strDate = jQuery.trim(strDate); var arrDate = strDate.split('/'); var day = parseInt(jQuery.trim(arrDate[1]), 10); var month = parseInt(jQuery.trim(arrDate[0]), 10); var year = parseInt(jQuery.trim(arrDate[2]), 10); var date = new Date(year, month-1, day); var convertedDate = "" + date.getFullYear() + (date.getMonth()+1) + date.getDate(); var givenDate = "" + year + month + day; if(givenDate == convertedDate) { alert("The given date is VALID!"); return true; } else { alert("The given date IS NOT VALID!"); return false; } } </script> <table> <tr> <td align="left">Enter a Date in the text box then click Validate button:</td> </tr> <tr> <td><input type="text" id="txtDate" name="txtDate" style="width:200px;" value="02/29/2011" /> (mm/dd/yyyy)</td> </tr> <tr> <td><input type="button" id="btnValidate" value="Validate" onclick="return validate();" /></td> </tr> </table> </body> </html>

Validate Date With JQuery And Date Object

Validate Date With JQuery And Date Object

+ [download id=”21″ format=”1″] + View our demonstration page to see How it works

Mar 14, 2012Hoan Huynh

Source Code Demo page

SQL Server Get number of working days and business hours between start date and end dateHow to view menu bar in IE, Firefox, Google Chrome
You Might Also Like:
  • Jquery checkbox checked
  • Get Image Width Height With JQuery And JavaScript
  • JQuery How to use DatePicker
  • C# ASP.Net Validate Date
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • JQuery Create Textbox With Count Down Limit Characters
  • JQuery Get selected value of radio button
  • ASP.NET JQuery Autocomplete Textbox
  • JQuery Allow only numeric characters or only alphabet characters in textbox
  • FancyBox Redirect To A Predefined URL When Click On Image
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

9 years ago JavascriptGETDATE, getFullYear, JQuery, split, Trim141
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
22,209 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
20,077 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
15,854 views
JQuery Allow only numeric characters or only alphabet characters in textbox
13,334 views
C# Read Json From URL And Parse/Deserialize Json
9,828 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Photo Editor App – How Good Is it?

  • The Best Way To Write An Essay – Creating A Good Essay
  • Free Online Photo Editor
  • Easy Tips For Writing An Essay
  • What Can I Expect From An Academic Essay Service?

Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (28)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (114)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development