How do you preventDefault (as in prevent form submission) about elm-form

[pablohirafuji]

Hey,
If I understood corretly, you should use the onSubmit attribute in the Html.Events package, like:

view : ViewModel -> Html Msg
view model =
    Html.form
        [ Html.Events.onSubmit (onSubmitMsg model.form) ]
        [ ... -- Your form view
        , Html.button [ type' "submit" ] [ text "Send" ]
        ]

onSubmitMsg form =
    case Form.getOutput form of
        Nothing -> FormMsg Form.Submit
        Just validForm -> Submit validForm

This works because the onSubmit event already comes with preventDefault = True. If you need different behavior, use onWithOptions to create a customized version of onSubmit.

[etaque]

Hello,
Do you want to prevent the browser submit event or something else?
Could you provide some code to show what you're trying to do?

[chalmagean]

I haven't got chance to try what @pablohirafuji said but yes, what I want is to prevent the browser submitting the form if validations are not passing.

[etaque]

Okey, so alternatively you can also use a basic button for submit, or avoid using the form tag.

[chalmagean]

Not using the form tag means I loose a few things like auto submit on enter (and not sure if it's valid HTML).

Here's the code: https://gist.github.com/chalmagean/f06eea7cf00c156456f463621958d848

The problems is that Html.form expects List (Html Msg) and I'm giving it List (Html Form.Msg). So I'm still not sure how to fix this.

[pablohirafuji]

Hey,
On submit you are double mapping to FormMsg (in line 70 as Html.map FormMsg and line 113 FormMsg Form.Submit). Don't map the attributes, just the formView, and you will have to handle the Submit case. Here's an example: https://gist.github.com/pablohirafuji/46c452341853f8693dee5fa90c877731.

[chalmagean]

@pablohirafuji sweet! That seems to work. Thank you.