Partially filled HTML5 date picker is submitting as completely blank

user_1420684 0
Viewed 181

I have a form with an HTML5 date picker, and if your partially fill it out (e.g. only day and month but no year), the selected fields stay as if they will be sent on, but in the actual POST that date field is sent as completely blank.

This is confusing for users and can't be validated on the backend if a completely blank date is allowed.

E.g.

  • '' Valid with a null=true date field
  • '02-03-2017' Valid as a date
  • '02-03-' Should be invalid, but it's being treated like a valid '' value

How can I make this form more UX friendly? Ideally I would send the incomplete data through and allow the server to validate and respond with the appropriate errors.

datepicker html
2 Answers

A bunch of solutions are possible :

  1. Force the usage of the date picker and disallow the manual capture

  2. Add an hidden field set to 0 if date input is blank, and 1 if not. Then only allow blank date if your hidden trigger is null.

  3. Auto complete date on partial input, so on blur event for instance complete a date not fully entered.

user_24170020

You can use event.target.validationMessage and event.target.validity.badInput properties.

For your third case validationMessage should provide some message like "Please enter a valid value. The field is incomplete or has an invalid date." and the badInput should return boolean true.

user_111175800
Related