I'm stuck with the following question: how can I determine if an input date field is incompletely submitted? For example, if I send 12/09/aaaa
as a value, the value actually sent is null
, which is the same value I obtain if I send gg/mm/aaaa
, i.e. the empty value. Is there a way to discriminate via JS between the two cases? (Actually, I'm using Vue.js but I think it's not so important.)
Thanks in advance!
CodePudding user response:
tl;dr: No, not natively
Problem
If you use the native HTML date input there is no way to differentiate between a partially filled state and a totally empty state because the native HTML date input must either be empty or have a valid date according to the spec:
4.10.5.1.7 Date state (type=date)
[...] User agents must not allow the user to set the value to a non-empty string that is not a valid date string. [...]
The
value
attribute, if specified and not empty, must have a value that is a valid date string.The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
This means, when the input is partially filled, no matter what form or input event is triggered (submit
, change
, etc) the value of the input will be an empty string.
Solution
You've got to build your own custom date input.
CodePudding user response:
You could regex, in this case, to validate if the provided input is a valid date format.
You could use the following regex
/^\d{2}\/\d{2}\/\d{4}$/
mentioned in the answer regular expression to validate datetime format (MM/DD/YYYY)
You could use (str).match(regex) in JS to use this feature.
I have shared an approach to use, regex can be updated based on use cases.
CodePudding user response:
let date = new Date('12/09/aaaa');
date == 'Invalid Date' //This will return true in date is not valid