5

What I want is for the user to only type in a valid date, however I'm having trouble figuring out a good way to accomplish that.

The date format needs to be "MM/DD/YYYY", so I have a mask on the input as "99/99/9999". While this forces the user to type only digits and automatically formats it in the way I need, the problem is this allows the user to type in something like "53/49/6540", which is an invalid date.

Attempt 1

Binding a function to the keypress/keydown event.

  • I have a regex that can validate the date as they type (so it allows "12" but not "13" for the month, for example).
  • All looks good.. but... starts showing some weird results when you edit
    • Let's say the input is "10/21/1999"
    • They want to change the month to "12".
    • So they put their cursor after the "0" and hit backspace,
    • Value is now "12/11/999 " and invalid, preventing input
    • Or, they simply highlight "0" and accidentally hit "3" instead of "2", it will go through, becoming "13/21/1999" then be invalid, preventing further input

Attempt 2

Binding a function to the keyup/changed event.

  • I get the old value, the new value and validate it, and revert back to the old if it's invalid
  • This creates a weird user experience as they watch what they typed in get removed and set back, which I do not like at all
  • Doesn't let the user backspace if invalid, since it reverts it
  • Still lets invalid data through if typed fast enough

Help

Is there any way at all to validate the date as they type it (rather than after the fact) without having weird things happen?

Plunkr showing issues: http://embed.plnkr.co/0qbiiiRnIo9SuJ5xNe30/preview

Improve this question
2
  • Use a date picker instead. It's best to validate dates. Also consider scenario like Feb 30 or Apr 31, etc.. It's best to use date picker. Prevent user from manually entering the date. On focus, show the date picker Commented Apr 9, 2015 at 18:12
  • I apologize, I didn't mention that I use a date picker as well (just didn't put it into the plunkr), but I don't want to prevent them from being able to type in the date too, which is where my issue arises. Commented Apr 9, 2015 at 20:38

2 Answers 2

Reset to default
1

After playing around with it more, I was able to come up with a solution that I'm satisfied with. Thought I would share in case anyone was curious:

Plunkr: http://embed.plnkr.co/gE1WXaXsYI7zpWPkmvVS/preview

Basically, I stumbled on the "selectionStart" and "selectionEnd" properties of an element, which allows you to grab the index of where the new value will be inserted on a keypress. So I was able to get the "new value" so to speak, by taking the old value and inserting the character typed into the correct position, validate it, and prevent keypress on invalid.

Another thing I did differently is strip out all slashes and spaces that the masking was inserting (_ _ / _ _ / _ _ _ _) and changed my regex to only validate based on numbers ("12121900" for example), which allows the user to backspace/insert characters at any point without getting weird "123/19/90" sort of variations that would fail.

It's not completely perfect, but better at least.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It's not bad but did allow 11/31/2016 which is invalid.
0

You can modify your first approach a little bit. You said you are binding keyup/down event and then validating the input, so do not intercept key event of backspace (keycode 8) i.e. do not validate the input whenever the user presses the backspace key.

Now you can also add a timeout of around 3 seconds that if user does not modify the input, then you can validate your input and tell user about date.

Improve this answer

1 Comment

That does solve the problem of backspace causing it to be invalid and revert for attempt #2, so thank you for your suggestion, but unfortunately all the other issues remain.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.