Title: jQuery Date Format Validation (Highlight The Text Field)
Tags: jquery;validation;date-format
Question: I have a date textbox on an html page. I want to validate it on run time using jQuery for the format dd-mm-yyyy. If the enter the invalid format the textbox background should turn red.
I'm using the following but failed to do so.
<script&gt;
jQuery(document).ready(function(){
jQuery('#submit').click(function () {
var dateReg = /^\d{2}\-\d{2}\-\d{4}$/;
if(!dateReg.test(date.val())){
date.addClass('highlight');
jQuery(date).focus();
return false;
} else date.removeClass('highlight');
</script&gt;
<style&gt;
.highlight { background: #FFE6E7; }
</style&gt;
<body&gt;
<form&gt;
<input type="text" name="date"/&gt; <em&gt;(dd-mm-yyyy)</em&gt;<br&gt;
<input type="submit" value="submit" id="submit"/&gt;
</form&gt;
</body&gt;
I tried it but unable to achieve it :(
Secondly I want it to be validate as soon as the user enters the value. Not onclick of submit.
Can anyone please help me with this?


Here is another answer: your regex is fine but your jQuery isnt:
jQuery('#date').focus
and you could use on keypress:
jQuery('#submit').keypress
or you can use focus out, it is triggered when lost focus:
jQuery('#submit').focusout
but be sure always to check backend! annyone can disable javascript
Comment for this answer: Ok, I fixed it myself. I made an entirely new code. So I'm going to share it here so others can use it too.

Here is another answer: I made a new code myself. It is working on OnClick of submit button too, but the purpose of highlighting it achieved.
<!DOCTYPE html&gt;
<html&gt;
<head&gt;
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"&gt;
<title&gt;Untitled 1</title&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;</script&gt;
<script&gt;
$(function() {
$('#btnSubmit').bind('click', function(){
var txtVal =  $('#txtDate').val();
if(isDate(txtVal))
$('#txtDate').removeClass('highlight');
else
$('#txtDate').addClass('highlight');
});
function isDate(txtDate)
var currVal = txtDate;
if(currVal == '')
return false;
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex
var dtArray = currVal.match(rxDatePattern); // is format OK?
if (dtArray == null)
return false;
//Checks for dd/mm/yyyy format.
dtDay = dtArray[1];
dtMonth= dtArray[3];
dtYear = dtArray[5];
if (dtDay < 1 || dtDay &gt; 31)
return false;
else if (dtMonth < 1 || dtMonth&gt; 12)
return false;
else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) &amp;&amp; dtDay ==31)
return false;
else if (dtMonth == 2)
var isleap = (dtYear % 4 == 0 &amp;&amp; (dtYear % 100 != 0 || dtYear % 400 == 0));
if (dtDay&gt; 29 || (dtDay ==29 &amp;&amp; !isleap))
return false;
return true;
</script&gt;
<style&gt;
.highlight { background-color:#FFE6E7; }
</style&gt;
</head&gt;
<body&gt;
<br/&gt;<br/&gt;
Date : <input type="text" id="txtDate" /&gt; (dd/mm/yyyy)
<br/&gt;<br/&gt;
<input type="button" value="ValidateDate" id="btnSubmit"/&gt;
</body&gt;
</html&gt;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:02/06/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<jquery><validation><date-format>', 'Title': 'jQuery Date Format Validation (Highlight The Text Field)', 'ViewCount': 4421, 'id': 14729595, 'user_AboutMe': None, 'user_AccountId': 1350901.0, 'user_DisplayName': 'Talal Masood', 'user_Reputation': 69.0, 'user_Views': 24.0, 'user_id': 1290571.0}}