In this article I will explain with an example, how to automatically insert (add) Slash character as User types in the Date Field (TextBox) using JavaScript.
This article will illustrate how to validate Date in dd/MM/yyyy format by automatically adding Slash character after 2nd character and 4th character using JavaScript.
JavaScript Script for inserting (Add) Slash in Date Field (TextBox)
Inside the window.onload event handler, first all the HTML INPUT elements are fetched from HTML Table and then a FOR loop is executed over the fetched elements.
Inside the FOR loop, a check is performed to determined, whether the HTML INPUT element is a TextBox and also whether it has a CssClass named date-format.
If both the conditions are TRUE, then
1. MaxLength attribute is added and its value is set to 10.
2.
KeyDown event handler is assigned which calls the
IsNumeric JavaScript function.
3.
KeyUp event handler is assigned which calls the
ValidateDateFormat JavaScript function.
IsNumeric function
This function allows only Numbers (digits) to be entered into the TextBox.
It takes INPUT element and KeyCode (the code of the pressed key) as parameter.
Then, a check is performed by checking the Key Codes and cancelling the all Key Codes which are not Numbers (digits) and it also automatically adds Slash ( / ) character.
ValidateDateFormat function
This function validates the date value against the Regular Expression and if the validation fails i.e. if the date Format is not dd/MM/yyyy, the HTML SPAN is displayed with the error message.
<script type="text/javascript">
var isShift = false;
var seperator = "/";
window.onload = function () {
//Reference all INPUT elements in the Table.
var inputs = document.getElementsByTagName("input");
//Loop through all INPUT elements.
for (var i = 0; i < inputs.length; i++) {
//Check whether the INPUT element is TextBox.
if (inputs[i].type == "text") {
//Check whether Date Format Validation is required.
if (inputs[i].className.indexOf("date-format") != 1) {
//Set Max Length.
inputs[i].setAttribute("maxlength", 10);
//Only allow Numeric Keys.
inputs[i].onkeydown = function (e) {
return IsNumeric(this, e.keyCode);
};
//Validate Date as User types.
inputs[i].onkeyup = function (e) {
ValidateDateFormat(this, e.keyCode);
};
}
}
}
};
function IsNumeric(input, keyCode) {
if (keyCode == 16) {
isShift = true;
}
//Allow only Numeric Keys.
if (((keyCode >= 48 && keyCode <= 57) || keyCode == 8 || keyCode <= 37 || keyCode <= 39 || (keyCode >= 96 && keyCode <= 105)) && isShift == false) {
if ((input.value.length == 2 || input.value.length == 5) && keyCode != 8) {
input.value += seperator;
}
return true;
}
else {
return false;
}
};
function ValidateDateFormat(input, keyCode) {
var dateString = input.value;
if (keyCode == 16) {
isShift = false;
}
var regex = /(((0|1)[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/((19|20)\d\d))$/;
//Check whether valid dd/MM/yyyy Date Format.
if (regex.test(dateString) || dateString.length == 0) {
ShowHideError(input, "none");
} else {
ShowHideError(input, "block");
}
};
function ShowHideError(textbox, display) {
var div = textbox.parentNode;
var spans = div.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
//Check whether SPAN has CSS class: error.
if (spans[i].className.indexOf("error") != 1) {
//Show or hide HTML SPAN.
spans[i].style.display = display;
}
}
};
</script>
Inserting (Add) Slash in Date Field (TextBox) using JavaScript
Inside the HTML page, you need to place an HTML TextBox and am HTML SPAN inside an HTML DIV.
TextBox – The TextBox will be set with CSS class date-format.
SPAN – The SPAN element will be used for displaying error message and it must be set with a CSS class error.
Note: This is a requirement that you need to place the TextBox and the HTML SPAN pair inside a common HTML DIV, otherwise the SCRIPT won’t work.
<div>
Birth Date:
<input type="text" class="date-format" />
<span class="error" style="display: none">Invalid Date. Only dd/MM/yyyy format allowed.</span>
</div>
Screenshot
![Enforce dd/MM/yyyy format validation using JavaScript in HTML]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
