SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: I want to validate the date
-
Dec 28, 2008, 12:31 #1
- Join Date
- Dec 2008
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I want to validate the date
I tried to validate date in two text input using this code
Code:<script language="javascript"> function validateDate(fld) { var RegExPattern = ((^(10|12|0?[13578])([/])(3[01]|[12][0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(11|0?[469])([/])(30|[12][0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(0?2)([/])(2[0-8]|1[0-9]|0?[1-9])([/])((1[8-9]\d{2})|([2-9]\d{3}))$)|(^(0?2)([/])(29)([/])([2468][048]00)$)|(^(0?2)([/])(29)([/])([3579][26]00)$)|(^(0?2)([/])(29)([/])([1][89][0][48])$)|(^(0?2)([/])(29)([/])([2-9][0-9][0][48])$)|(^(0?2)([/])(29)([/])([1][89][2468][048])$)|(^(0?2)([/])(29)([/])([2-9][0-9][2468][048])$)|(^(0?2)([/])(29)([/])([1][89][13579][26])$)|(^(0?2)([/])(29)([/])([2-9][0-9][13579][26])$)) var errorMessage = 'Please enter valid date as month, day, and four digit year.\nYou may use a slash, hyphen or period to separate the values.\nThe date must be a real date. 30/2/2000 would not be accepted.\nFormay dd/mm/yyyy.'; if ((fld.value.match(RegExPattern)) && (fld.value!='')) { alert('Date is OK'); } else { alert(errorMessage); fld.focus(); } } </script>
Code:tr> <td> From Date: <Input type="text" style="COLOR: white; BACKGROUND-COLOR: #728fd6; face: verdana" size="10" name="TxtFrom" ID="Text4" onblur="validateDate(this);" /> </td> <td> To Date: <Input type="text" style="COLOR: white; BACKGROUND-COLOR: #728fd6; face: verdana" size="10" name="TxtTo" ID="Text5" onblur="validateDate(this);" /> </td> </tr> <tr>
-
Dec 28, 2008, 17:08 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
The regular expression is the problem. That's designed for systems that can't properly parse dates.
You can use Date.parse more effectively to test for valid dates. Here's how:
Code javascript:if (!isNaN(Date.parse(fld.value))) {
And in your sample code:
Code javascript:function validateDate(fld) { var errorMessage = 'Please enter valid date as month, day, and four digit year.\nYou may use a slash, hyphen or period to separate the values.\nThe date must be a real date. 30/2/2000 would not be accepted.\nFormay dd/mm/yyyy.'; if (!isNaN(Date.parse(fld.value))) { alert('Date is OK'); } else { alert(errorMessage); fld.focus(); } }
I'm also noticing a double-bounce problem when testing with the onblur event.
What's happening is that after completing a bad date, when you hit tab to go to the next field the first field is found to be invalid, and the focus is set on to the first tab. That part is fine.
The trouble is that due to the focus change, from the second date back to the first, the second date is also being validated and, because the second one is empty, a second message about a bad date is occurring. It's a double bounce that's taking place.
This is why the onchange event should be used instead of the onblur event.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Dec 30, 2008, 04:10 #3
- Join Date
- Dec 2008
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Dec 30, 2008, 04:57 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
That depends on what you if they're not valid. In this case, the field is cleared hen a bad date is provided.
Code html4strict:<input type="text" name="date">
This script is to be put at the end of the body, just before the </body> tag.
Code javascript:document.getElementsByName('date')[0].onchange = validateDate; function validateDate() { if (Date.parse(this.value)) { return true; } field.value = ''; return false; }
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
Bookmarks