Link to home
Start Free TrialLog in
Avatar of Massimo Scola
Massimo ScolaFlag for Switzerland

asked on

JavaScript and Regular Expressions - How to implement date validation?

I had this question after viewing JavaScript: Issue with onClick.  I asked this question today as I had issues with making the function work in the first place.

I assume that the regular expression is correct as it should only accept dates in the 2016-12-30 format. I believed that adding a regular expression is sufficient for the date validation to work. Obviously I was wrong.

How do I make a regular expression work in JavaScript? Do I need to add an if loop with a boolean value?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<script type="application/javascript" language="javascript">

	formIsOK = false;

	function checkDate() {
		
	var theExpression = /^[0-9]{4}\-(0[1-9]¦1[012])\-(0[1-9]|[12][0-9]3[01])/;
	var getDate = document.getElementById("theDate");
	var matchData = getDate.value.match(theExpression);
	
	var m = getDate.value.split("-");
	
	var theYear = m[0];
	var theMonth = m[1] - 1;
	var theDay = m[2];

	var newDate = new Date(theYear,theMonth,theDay);
	alert(newDate);
	formIsOK = true;
	}
</script>
<body>

<p>Date validation: </p>

<table width="200" border="1">
  <tbody>
    <tr>
      <td>Date</td>
      <td><label for="textfield">Text Field:</label>
      <input type="text" name="date" id="theDate" /></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="button" value="Click me" onClick="checkDate()"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Open in new window

Avatar of Shaun Vermaak
Shaun Vermaak
Flag of Australia image

var theExpression = /^[0-9]{4}\-(0[1-9]¦1[012])\-(0[1-9]|[12][0-9]3[01])/;
	var getDate = document.getElementById("theDate");
	var matchData = getDate.value.match(theExpression);
	
	var m = matchData.value.split("-");
	
	var theYear = m[0];
	var theMonth = m[1] - 1;
	var theDay = m[2];

	var newDate = new Date(theYear,theMonth,theDay);
	alert(newDate);
	formIsOK = true;

Open in new window

Avatar of Massimo Scola

ASKER

What I forgot to say is, that I can still add values such as 2016-99-99 ... so maybe I have an issue with the regular expression.
So how do I prevent a user from entering such a date with a regular expression?
^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$
Hello Shaun

I'm afraid but I do not understand your code; it already took a long time to write my regular expression.
But my main other question is: How do I implement it? How do I catch the input/stop/inform the user that the date entered does not match the format yyyy-mm-dd ?

Does the regular expression work by itself just having it there?
That is a regular expression to check for a valid date. See example here https://regex101.com/r/29iVIO/1
This point is that regular expressions are used for basic checking then you do validation by parsing to a date etc.
If the parse fails, it is not a valid date.

You can use this expression in "var theExpression = " is you want
ASKER CERTIFIED SOLUTION
Avatar of Shaun Vermaak
Shaun Vermaak
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Yes, you're right. It's better to go for this solution. It's easier.
Thanks for your help.