Html input type date validation: Not to allow date before today, even if you type manually

Question

I am working on a module in project where I have to allow the user to set a date to schedule an event. But, I also want to put a check that the user does not set a date that is before today. So in my input type date I set a min attribute which equals to the date today. So that dropdown calendar now does not allow to click on dates before today. But if then I type the date manually there, it obviously takes that date. How do I stop the setting of date by manually tying or some solution that keeps a check on typed value as well.

Answer 1

Please Use below code,

var now = new Date(),
minDate = now.toISOString().substring(0,10);
$('#my-date-input').prop('min', minDate);

Answer 2

Although HTML input elements allow to you supply attributes like min or max that limit the values the user can select or enter, you must never rely on these. There is usually a way to enter invalid data into the control, by typing or copy-pasting. In your particular case, you could set the input's readonly attribute, which disallows typing leaving only selection (where validation does always occur), but I think that would diminish user experience.

You should also be aware that not all browsers show a selection GUI for input elements of type date. Some browsers only allow type-in. The date selection GUI is also different between browsers, though that may not be a problem.

You should always implement server-side validation of all data that is ever submitted, since browser validation can be circumvented in a number of ways, which you are probably aware of. Having said that, for client-side validation you may want to look into the constraint validation API which has fairly ubiquitous browser support. Still, you may not like the way in which the API displays validation messages.

For even better support, you can build your own validation (or use a library). There are three points at which you could apply validation:

1. Whenever the user makes a change to a control, i.e. as they type
2. When the user leaves the control (the control loses focus)
3. When the user submits the form

Option (3) is a good one to always have in place. When the form is submitted you go through all the controls (using the constraint validation API's checkValidity function, for instance, or your own implementation) and display a validation summary.

Validation as you type (1) requires several steps. An empty field - if not required - is valid. As the user types, partial dates, e.g. "2019" are not valid. A full date is valid provided that is between the minimum and maximum that you set. Your custom validation API could implement onChange event handlers to run validation. For validation when the user leaves the field, you could use the onLeave event.

I think that if you want to make sure that validation occurs exactly when and how you want it, you may want to forgo the constraint API and roll your own. In particular, such an approach would allow you to define your own error messages and placement of same, and add validation rules that aren't part of the constraint API.