Is there a way to force a user to select an autocomplete value before they can submit the form?

Question

I am using the jqueryui autocomplete feature to allow the user to select their location. I need to make sure they select a location from the autocomplete before they can submit the form. I don't want them to be able to submit the form before they select a value.

My solution is after they submit make sure that the value found is in the database. The other solution would be that when they click submit or after they leave the location box and go to another field to submit the entry via ajax to ensure it is valid if not show an error and do not let them submit the form.

I was wondering if there was something easier I could do, or if there is something more elegant. I realize they have to be able to type something into the box to get the autocomplete to work, so I could force them to select a value from the autocomplete because it is not a select box, so it seems that my above solutions would be the best way to go.

Thoughts?

Answer 1

You'll need to retain server-side checking to avoid security and other bugs in any case. However, you can add client side verification to be more user-friendly.

In essence, if you disable the submit button and have the form's onsubmit "return false" while the submit button is disabled, you can help ensure the user doesn't submit until you say so - by enabling the submit button when the form's value's are valid.

To validate a form on the client side, since you're using jquery already, you may want to look at the validate plugin for jquery.

Answer 2

I would set a flag if the user has clicked an autocomplete entry and clear the flag if the textbox is modified.

Answer 3

What I would suggest, is not using a submit button at all, but a simple button where you attach a click event with your javascript. In this way, when the user clicks it, you can validate whatever you need and submit the form yourself.

I do not see the point of going as far as making an AJAX request to validate the input of one of your fields, unless you really must take resource use to a minimal point. I say this because, if you are going to do AJAX requests to validate, you may as simply send the whole form and validate in the backend already, unless is a really huge form.