有没有办法强制用户在提交表单之前选择自动完成值？答案

【问题标题】：Is there a way to force a user to select an autocomplete value before they can submit the form?有没有办法强制用户在提交表单之前选择自动完成值？
【发布时间】：2010-05-31 15:39:56
【问题描述】：

我正在使用 jqueryui 自动完成功能来允许用户选择他们的位置。我需要确保他们在提交表单之前从自动完成中选择一个位置。我不希望他们能够在选择值之前提交表单。

我的解决方案是在他们提交后确保找到的值在数据库中。另一种解决方案是，当他们单击提交或离开位置框并转到另一个字段以通过 ajax 提交条目时，以确保它是有效的，如果不显示错误并且不要让他们提交表单。

我想知道是否有更简单的方法可以做，或者是否有更优雅的方法。我意识到他们必须能够在框中输入一些内容才能使自动完成功能正常工作，因此我可以强制他们从自动完成功能中选择一个值，因为它不是一个选择框，所以我的上述解决方案似乎是最好的方法。

想法？

【问题讨论】：

标签： jquery-ui jquery jquery-ui-autocomplete

【解决方案1】：

在任何情况下，您都需要保留服务器端检查以避免安全性和其他错误。但是，您可以添加客户端验证以更加用户友好。

本质上，如果您禁用提交按钮并在提交按钮被禁用的情况下让表单的 onsubmit “返回 false”，您可以帮助确保用户在您这样说之前不会提交 - 通过在提交时启用提交按钮表单的值是有效的。

要在客户端验证表单，由于您已经在使用 jquery，您可能需要查看validate plugin for jquery。

【讨论】：

【解决方案2】：

如果用户单击了自动完成条目，我会设置一个标志，如果文本框被修改，我会清除该标志。

【讨论】：

【解决方案3】：

我的建议是，根本不使用提交按钮，而是一个简单的按钮，您可以在其中使用您的 javascript 附加点击事件。这样，当用户点击它时，您可以验证您需要的任何内容并自己提交表单。

我认为发出 AJAX 请求以验证您的某个字段的输入没有意义，除非您确实必须将资源使用降至最低。我这样说是因为，如果您要执行 AJAX 请求来验证，您可以简单地发送整个表单并已经在后端进行验证，除非是一个非常大的表单。

【讨论】：

某些浏览器在某些情况下会提交有关其他事件的表单，例如 on-enter。此外，诸如移动浏览器之类的东西可能不会像您期望的那样运行。因此，最好不要仅将此类事件挂在按钮上，而是挂在表单上 - 无论提交表单如何，您都将有机会运行您的代码。