Simple javascript validation that stops user from submitting form when entering invalid date format?

Question

I am looking for this now quite a while, but did not get good enough answers.

The jquery validation engine is flawed imho. Using the class attribute to place validation rules seems backwards.

I want something super lightweight that:

Displays a small error message as well stops the user from submitting the form.

The error that the user does is the following. He tabs into the date field, then enters manually a wrong format, then submits the form.

See this fiddle

Code:

    <input id="first" type="text" value="" /> 
 <input id="hello" type="text" value="234.12.1984" />



$("#hello").datepicker();

$("#first").focus();

[Working Fiddle](http://jsfiddle.net/r39Ru/4/) making the `textbox readonly` will not allow the user to manually edit the value and hence making the value valid always... — Bhavik, Apr 30 '14 at 16:43
well that is true, but the use case is that the user manually enters the date. Honestly, forcing people to use a datepicker, when they can enter the date in 2 seconds manually, is just a bad user experience — Toskan, Apr 30 '14 at 16:46
Why is using classes to trigger validation rules "backwards"? You have a very specific use case, and one could do a lighter solution for that case. And then another for another case, etc. A generic and flexible plugin comes at a cost, yes. But I like the use of classes to trigger. It allows me to seperate the javascript from the content - I have a generic validation routine and then I just need to set a class on the relevant elements when I generate new content. Having set some generic default handlers for jquery validate that fit my site I almost never have to alter the validation javscript — Adam, Apr 30 '14 at 16:47
@Adam well you can use, let's say, a tooth brush to put your peanut butter on your bread. It is gonna work, but it was designed for something else. `class` is for CSS classes, nothing else. Why not use one of the html5 attributes, e.g. data-foobar? Abusing attributes can lead to unwanted long term problems. — Toskan, Apr 30 '14 at 16:55
Have you tried [jQuery Validate](http://jqueryvalidation.org/)? It does *not* require any modification to your HTML. — Andrew Whitaker, Apr 30 '14 at 17:03
`class` is not just for CSS imo. It is for grouping together elements with a common semantic characteristic and for finding such elements. This finding can be to style them or to apply functionality. In the same way you added the datepicker by id. But I suspect that the actual reason is two-fold: firstly the validation plugin supports html 4 (which does not techically allow data-* attributes), not only html 5; secondly that finding elements by class is faster than by attribute since modern browsers have indexes for classes. — Adam, Apr 30 '14 at 17:06
@AndrewWhitaker: I would have recommended that plugin, except that the OP specifically said in the question that the do not like that plugin because it uses classes (well, they said "jquery validation engine" rather than "jQuery Validate", but the url is jqueryvalidation.org and the plugin bases its rules on classes so i think that is what they meant). As you can seefrom my other comments I don't agree and would actually second the recommendation of the plugin, but it's not what this OP wants. — Adam, Apr 30 '14 at 17:15
@Adam: jQuery validate *can* work with classes, but it doesn't *have* to. You can use it and define all of your rules in JavaScript. — Andrew Whitaker, Apr 30 '14 at 17:16
@AndrewWhitaker: quite right! I stand corrected. I knew you could also do it based on the name of the element (and I know it automatically takes html5 input types and certain attributes (such as max/min) into account) but looking at http://jqueryvalidation.org/rules I see that in addition to classes "Validation methods with parameters can be specified as attributes". I see also that there is another plugin to allow specification by meta-data. I personally still find classes the most convenient (and do not see any problems in prinicple with doing so) but ymmv. Certainly makes it a valid answer — Adam, Apr 30 '14 at 17:24

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

Working Fiddle

<input type="text" class="date" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="using pattern" title="dd/mm/yyyy or mm/dd/yyyy"/>

The only pattern it recognizes is dd/mm/yyyy or mm/dd/yyyy

Update
This answer might help you.

Hope it helps..!

edited May 23 '17 at 12:11

Community

1
1

answered Apr 30 '14 at 16:59

Bhavik

4,836
3
30
45

that is cool, didn't know about the pattern attribute. A shame it is so little supported. E.g. no safari support, no IE< IE10 support – Toskan Apr 30 '14 at 17:07
Does not actually validate that it is a valid date though. 22/22/0000 matches the pattern. As does 99/99/9999 – Adam Apr 30 '14 at 17:08
@Adam that's not perfect but you could find many ***[alternates here](http://html5pattern.com/Dates)*** – Bhavik Apr 30 '14 at 17:25
1

@Bhavik Yes, there is even one which takes leap years into account (I'd need to comment that if I used it!). Nice link. However, if you want to also display an error message then you need a js solution. – Adam Apr 30 '14 at 18:13
@Adam It shows the `red` border as error and even the `title`... According to me this is the most light solution of what Toskan wants... :) – Bhavik Apr 30 '14 at 18:33
I'm not getting a title shown on error (as hover text yes, but people who are using a mouse will likely use the datepicker imo). But yes, it is the lightest solution as long as you only have to support recent browsers. – Adam Apr 30 '14 at 18:38
I am opting for this solution (but accepting the other for compatibility reason), since it is the easiest to implement and the company is only using newest firefox and chrome anyways. Both showing the title on error. @Adam what browser are you using? btw the link of bhavik is down with "alternates here" – Toskan Apr 30 '14 at 21:01
there is a problem with this solution though when ajax is getting used to submit the form. Probably all kind of javascript triggering submit will shortcut this pattern. So well.... – Toskan Apr 30 '14 at 21:17
is there maybe a way I can trigger this pattern validation by javascript? – Toskan Apr 30 '14 at 21:27
@Toskan I am using latest FF. I was testing in the fiddle linked. On editing it (actually adding a form and a submit button) then you do get an error message. With the original fiddle then pressing enter in the field got the border but not the error! – Adam Apr 30 '14 at 21:48
@Toskan I suppose you *could* have something in the submit event which gets the pattern attribute from the field and uses that in a regexp match against the value. But maybe the best is to combine this with my answer? No reason you can't have the pattern and a javascript check that the actual date is valid. – Adam Apr 30 '14 at 21:52
@Adam yes I am opting for your answer now, for stated problems. I mean unless I can trigger the browser manufactured pattern thingy, there is no use in it and I will build my own little thing, which is fun anyways. – Toskan Apr 30 '14 at 22:01

Adam · Accepted Answer · 2014-04-30T18:32:58.620

Add an (initially hidden) error message (say with id "error") and try soemthing like the following:

$('form').submit(function(event){
    try{
        var d = $('#hello');
        $.datepicker.parseDate(d.datepicker( "option", "dateFormat" ), d.val());
    }catch(e){
        event.preventDefault();
        $('#error').show();
        return false;
    }
});

(Maybe with a class/id to say which form of course). Working fiddle

Edit

In response to OP's comment that valid dates missing a leading zero on day/month were then accepted, my suggestion would be simply to fix such dates. I think it is more user-friendly than throwing an error on a valid date. For example, change the try block to

var format = d.datepicker( "option", "dateFormat" );
var tmp_date = $.datepicker.parseDate(format, d.val());
d.val( $.datepicker.formatDate(format, tmp_date) );

I have an updated fiddle where I also added extra code to log the data that would be submitted to the console to show it (I added a name to the input so it would submit the data).

the problem with you approach is, that datepickers parsedate will not throw an error when e.g. date must be dd.mm.yy (which is equivalent of e.g. 13.09.2014, but not 13.09.14) http://jsfiddle.net/6WAjs/2/ — Toskan, Apr 30 '14 at 18:14
@Toskan: see my edit. Alternatively you could combine with a simply regexp. Personally I prefer this approach because the format is only set once (in the `$("#hello").datepicker()` call - or not set, you simply use the datepicker default). Using a regexp means you need to sync the date format and the regexp. Depends a bit on the use case - in my work I have to worry about intenrationalisation so date formats, etc become a pain quite quickly if you are not careful. — Adam, Apr 30 '14 at 18:35

Simple javascript validation that stops user from submitting form when entering invalid date format?

2 Answers2