Opinion on validation

[kilianso]

Hey there!

Thank god i found your repo. I tried this and that, but your implementation is by far the best autocomplete solution out there.

I was wondering about validation. How do you handle that in your own usecases?

I'm working on a form where people need to enter their city. More or less, i'm using the same code as in your example with Leaflet.. Now my problem is validation. I want people to be forced to pick one of the suggestions from the list, rather than submitting their own, e.g. wrongly typed city names or even just a part of it.
I also want to save the coordinates in a hidden input, so i really need them to pick one of the suggestions.

I was thinking of two options:

1. Clear the input on blur if none of the suggestions have been selected. This way the input would be empty, and therefore invalid.
2. Put all the results in the pattern attribute of the input to validate, whether the current input value is matching one of the suggestions. This way, on submit the browser would check if the current value matches one of the suggestions.

How would you approach this? Is there a third, even better solution or one that i just oversaw in your docs?

Would be cool to hear your thoughts.
Cheers

[tomickigrzegorz]

Hi,
Probably the simplest approach that you can think of quickly.
A variable that is initially set to false, when someone writes it, it is always false.
When you select it from the list, you change it to true and only then you can submit the form using the button.
When someone wants to enter their own city and send the form, you give info that they can only choose a city from the list.
Only selecting a city from the list changes the value to true.

Another approach https://tomik23.github.io/autocomplete/#select-item
Selecting an element and putting it into input which is set to readonly and giving it the option to do submit.

Good luck

[kilianso]

Ah nice! Thanks for the tip.