Opa: Prevent Page Reload when Form Is Submitted

Question

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.

Answer 1

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"))))