How can i validate the input from a html5 Datalist?

Question

I would like to know how I can validate the input value that comes from a Datalist. I mean, if I have a Datalist where the user can start to write

Answer 1

You can do this with HTML5 validation using pattern. It's easier if you're populating your datalist with some sort of template, but it would look something like this (Note that you would need additional code to handle the validation - I just added very simple CSS to display the validation state)

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}