html & js text field data (DD-MM-YYYY) validation

Question

In my form I have a text field in which user type date. Good habit tells me to not let user to put anything other then dgit and '-' symbol in the field.

However i have a bit problem with implementing such feature. So far I Have a field which accept only digits. If user try to put in field letter, this letter is being removed. But the point is to create (DD-MM-YYYY)format so field have to accept '-' symbol.

Here is my code:

<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"/>

i tried put |\- into regex but with no success. Can anyone point me where I am doing mistake?

Don't reinvent the wheel, many have done this before, google. — gdoron, Mar 21 '13 at 12:21
I just want to do this this way instead of using separate functions.. — Mithrand1r, Mar 21 '13 at 12:23
Use the regex `/[^\d-]/g` [demo fiddle](http://jsfiddle.net/arunpjohny/puLtX/) — Arun P Johny, Mar 21 '13 at 12:25
Also look at [this post](http://stackoverflow.com/questions/5465375/javascript-date-regex-dd-mm-yyyy) — Arun P Johny, Mar 21 '13 at 12:26

Arun P Johny · Answer 1 · 2013-03-21T12:30:57.247

1

You can try something like

<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/[^\d-]/g.test(this.value)) this.value = this.value.replace(/[^\d-]/g,'')" onchange="validate(this)"/>

function validate(el){
    var regex = /^(0?[1-9]|[12][0-9]|3[01])-(0?[1-9]|1[012])-\d{4}$/;
    if(!regex.test(el.value)){
        alert('invalid date');
        el.value = '';
    }
}

Demo: Fiddle

edited Mar 21 '13 at 12:30

answered Mar 21 '13 at 12:24

Arun P Johny

384,651
66
527
531

score 1 · Answer 2 · answered Mar 21 '13 at 12:26

1

HTML5 has another approach for you:

<input type="date" name="test3">

The browser is responsible for the formatting of the date presentation, though.

answered Mar 21 '13 at 12:26

Alasjo

1,240
8
17

score 1 · Accepted Answer · answered Mar 21 '13 at 12:28

1

use thie regex

/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/

you can also

 **/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/.test(input.value)**

answered Mar 21 '13 at 12:28

Rami Jamleh

1,819
1
13
10

score 0 · Answer 4 · answered Mar 21 '13 at 12:31

0

You can do this with HTML5

see my jsfidle: http://jsfiddle.net/H7tMZ/2/

<form>
    <input type="text" name="date" pattern="\d{1,2}-\d{1,2}-\d{4}" placeholder="dd-mm-jjjj"/>
    <button type="submit"/>
</form>

answered Mar 21 '13 at 12:31

Extranion

588
8
25

html & js text field data (DD-MM-YYYY) validation

4 Answers4