If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Validating Date with JS using Reg Expression

Hey all,

I've been practicing JS and today I decided to create a "To Do" List.

So far, I've gotten everything working properly except the validDate function which makes sure the date entered is in a valid format (12.12.2012 or 12/12/2012, etc.) However, it's not working in any browsers. I used Chrome Dev tools and I keep getting an error "addDueDate" is not defined. Any idea but I'm doing wrong. I'm very new to Reg Expressions so i very well could have messes something up.

NOW...there's another problem: You don't DO this validation until *AFTER* the item has ALREADY been "published" in the <table>. (And, by the by, it's bad practice to use innerHTML to generate an entier <table>, most experts would say.)

So wouldn't it make more sense to simply incorporate the test into the the addList( ) function and then *NOT* publish to the <table> if the date is invalid?

Oh...and as another minor comment: Named <form>s are considered obsolete. You should give the <form> an id instead and use document.getElementById() to "find" the form. Of document.forms[0] and forget the id if you know you will only have one <form> on the page.

Oh...and as another minor comment: Named <form>s are considered obsolete. You should give the <form> an id instead and use document.getElementById() to "find" the form. Of document.forms[0] and forget the id if you know you will only have one <form> on the page.

Thanks so much. All of this was very useful information. I will make the changes.

That checks if the format of the date is correct, (but note that USA and UK formats differ), but does not at all check whether the date is valid - not 56th February, or 26th of month 34, or year 9235. So not very useful.

you can do the other js too, but this should be your html starting point.
it works even with js disbled, and is more accessible than wresting with a script if you can't see everything at once, or at all for that matter...

Last edited by rnd me; 12-08-2012 at 08:16 AM.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

I have to say - while some 80% of browsers still in use do not support HTML5, stick with Javascript. I do accept that the new input types included in HTML5 will degrade properly in older browsers. But they do not actually work. And different browser vendors have implemented support in different ways. IE support seems to be minimal.

I have to say - while some 80% of browsers still in use do not support HTML5, stick with Javascript.

according to http://caniuse.com/#feat=form-validation, most users last month could expect the full validation set, and pattern is one of the most supported specific features of that.
considering tablets are the #1 wish-list item this year, expect IE to take a big hit by the 31st. i expect the numbers for jan, when they come out in feb, will show at least 2/3 if not 3/4. let's hope!

js should be used to provide graceful degradation.

but the html5 costs almost nothing, and even right now runs works often than not, and works for those poor folks with javascript disabled we hear soo much about.

i guess why code 5 lines when 20 will do right?

i didn't go all out say simply use <input type=date>, that's crazy talk!

Last edited by rnd me; 12-08-2012 at 09:19 AM.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

FWIW I find the HTML5 form attributes look (and perhaps behave) differently in different browsers; I know this is to be expected but sometimes the difference is quite discernible. This is tempting me to ignore (most of) them, use JS, but (of course) rely on server-side validation.

"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

FWIW I find the HTML5 form attributes look (and perhaps behave) differently in different browsers; I know this is to be expected but sometimes the difference is quite discernible. This is tempting me to ignore (most of) them, use JS, but (of course) rely on server-side validation.

Once more, I agree totally with your comments.

All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.

FWIW I find the HTML5 form attributes look (and perhaps behave) differently in different browsers; I know this is to be expected but sometimes the difference is quite discernible. This is tempting me to ignore (most of) them, use JS, but (of course) rely on server-side validation.

the following behaves exactly the same in ie, ff, ch, and op, i didn't test safari.

furthermore, it's a much nicer ui, provides color-based real-time feedback, hooks directly into the accessible API used by A.T. to communicate requirements to the visually and physically disabled, won't let wrong info be submitted (even w/o js), doesn't use alert(), doesn't use hand-coded validation-error messages (less work each field), errors message appear in the local language, bad entries text can survive a page refresh for a 2nd chance to correct errors without retyping, and allows custom css to style the various validity states.

again, i test in the top 4 browsers, and the behavior is nearly identical, and very nice UX i must say, in all of them.

the only differences i noticed was the wording on the message, but it was all saying the same thing, and all of them correctly showed the title attrib as the suggestion:

FF/CH:

Code:

Please match the requested format:
mm/dd/yy

OP:

Code:

Please use the required format:
mm/dd/yy

IE:

Code:

You must use this format: mm/dd/yy

step back from past experiences for a moment, try the code in your favorite browsers, and ask yourself "is all that really worth typing 3 attribs?"

if you think not, and you would rather give your users a pop-up box that can leave them with no further communication if the check it's little checkbox, or you can have something that works almost everywhere, can easily be poly-filled for IE7/8, feels nice, behaves well, looks better, is highly accessible, and much less code to write for each app/field, then i suggest you take up photography or knitting or something besides web dev.

if nothing else, rip your config from the html and feed that to javascript instead of hand-coding strings and one-language error message; i can't see the harm at all.

Last edited by rnd me; 12-08-2012 at 08:38 PM.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

Just my opinion.. but a single input on a page doesn't convince. It's when trying to create an entire form on a page that the differences are more obvious.

Even so, it looks noticeably different in IE and, in fact, the submit button (which displays "Submit Query" and is therefore much wider) did nothing for me at all in IE9; the input-background is not pink. FF17 says "Please fill out this field" - it doesn't include the "dd/mm/yy". Added I am aware that not all of these points are directly relevant to HTML5.

Personally, I am not interested in debating the point - I'm just recounting my experience and thoughts. Besides, I am not rejecting HTML5 - I'm happy to use it where it is useful (autofocus, required..), but one cannot ignore the differences.

Last edited by AndrewGSW; 12-08-2012 at 08:33 PM.

"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS