jquery - 如何处理 jQuery Mobile 中的表单错误状态并返回 HTML？

Question

在 jqm 中处理表单的最佳方法是什么？

例如，假设用户填写了一个表单，但某些数据未验证。它没有被 JS 验证接收到，但它确实触发了一些业务逻辑，这意味着系统无法继续。

在 jqm 中，表单将返回给用户，框架将加载它并导航到它。期望，我不希望它被导航到，因为它不是一个新状态 - 我只是希望它显示带有错误消息的更新表单。我也不想禁用 ajax，因为这会增加不必要的整页重新加载。

理想情况下，我想要的是一种告诉 jqm 不要转换或将响应包含在历史记录中的方法 - 而只是显示它来代替现有的内容。

我看到这个工作的唯一方法是编写我自己的小表单处理程序并从服务器返回 JSON，其中包括错误状态。如果提交成功，导航到下一页，否则使用作为 JSON 对象一部分返回的 html 更新 View 中的 html，其中包含任何错误消息。

看来一定有更好的方法？

谢谢

Answer 1

好问题，我也有兴趣看看其他人怎么说。无论如何，在最近的一个应用程序(也必须离线工作)中，我用我的表单沿着您建议的路线走:

1. 阻止默认提交操作。
2. 使用来自按钮的 ajax 调用，该调用会在将数据提交到网络服务之前检查数据，或者只是将数据保存到本地数据库(取决于状态标志以及我们是否在线)。<
3. 确保所有相关的成功/失败消息通过提交回调慢慢返回，以便我们可以...
4. … 使用用户提交的结果更新同一 html 页面。

效果很好，用户也很满意。然而，它适合我的特定情况 - 我不想使用任何查询字符串/location.hash东西，因为(a)jQM有时会因为哈希而崩溃，(b)用户可能会离线(没有网络服务器意味着没有查询字符串)。当然，您的里程可能会有所不同。

编辑:用消息更新页面的代码对于我的应用程序，我希望在需要时在当前页面中显示消息列表，因此我在相关 HTML 页面中有一个空的无序列表 (messages)，该列表又位于样式化的 div ( 消息 Pane )。下面的代码片段显示了更新是如何发生的(注意 jQM 中需要的 refresh 调用)。您可以从 ajax 处理程序触发一些类似这样的代码:

var list = $("#messages");
list.append('<li>YOUR MESSAGE HERE</li>');
list.listview('refresh');
$("#message-pane").show();