Opa：提交表单时防止页面重新加载

发布于 2024-12-08 15:37:41 字数 708 浏览 1 评论 0原文

在 Opa 中，如何防止提交表单时重新加载页面？当按下提交时，我想执行一些客户端验证，并且仅在验证通过时才提交表单。

我正在使用此表单：

<form onready={_ -> ready()} id=#form_id>
  <input type="submit" value="Submit" />
</form>

此函数在提交时成功记录其消息，但仍重新加载页面：

ready() : void =
  do ignore(Dom.bind(#form_id, {submit}, ( _ -> Log.notice("submit","submitted"))))

此函数无法记录其消息并重新加载页面：

ready() : void =
  do ignore(Dom.bind_with_options(#form_id, {submit}, ( _ -> Log.notice("submit","submitted")), [{prevent_default}]))

我避免使用 WFormBuilder 因为我需要对表单的 html 和验证错误消息进行细粒度控制（当我尝试时，这在 WFormBuilder 中似乎不是一个选项）。

感谢您的帮助。

原文

In Opa, how can I prevent a page reload when a form is submitted? When submit is pressed, I want to perform some client-side validation and only submit the form if validation passes.

I'm working with this form:

<form onready={_ -> ready()} id=#form_id>
  <input type="submit" value="Submit" />
</form>

This function successfully logs its message on submit, but still reloads the page:

ready() : void =
  do ignore(Dom.bind(#form_id, {submit}, ( _ -> Log.notice("submit","submitted"))))

This function fails to log its message and reloads the page:

ready() : void =
  do ignore(Dom.bind_with_options(#form_id, {submit}, ( _ -> Log.notice("submit","submitted")), [{prevent_default}]))

I'm avoiding using WFormBuilder because I need fine grained control over the html of the form and the validation error messages (which did not seem like an option in WFormBuilder when I experimented with it).

Thanks for your help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖不如嘢 2024-12-15 15:37:41

在源 WFormBuilder，我在其表单 html 中找到了此属性： options:onsubmit="prevent_default"

所以代码片段具有我正在寻找的行为：

<form onready={_ -> ready()} id=#form_id options:onsubmit="prevent_default">
  <input type="submit" value="Submit" />
</form>

ready() : void =
  do ignore(Dom.bind(#form_id, {submit}, ( _ -> Log.notice("submit","submitted"))))

In the source of WFormBuilder, I found this attribute in its form html: options:onsubmit="prevent_default"

So snippet has the behavior I was looking for:

<form onready={_ -> ready()} id=#form_id options:onsubmit="prevent_default">
  <input type="submit" value="Submit" />
</form>

ready() : void =
  do ignore(Dom.bind(#form_id, {submit}, ( _ -> Log.notice("submit","submitted"))))

回复收藏 0 原文

~没有更多了~