Is there a way to programmatically determine if an input date field is incomplete?

Question

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!

Answer 1

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.

Answer 2

let date = new Date('12/09/aaaa');

date == 'Invalid Date' //This will return true in date is not valid

Answer 3

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.

– reference

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.