Disable Elm form submission without no-op message

Question

I have an Elm app with an HTML form (containing an input field and a submit button) that I would like to disable while the input is not valid. I've managed to do that by binding form submission to a no-op message when the input is invalid:

type Msg
    = Input String
    | Submit
    | Noop

viewForm : Model -> Html Msg
viewForm = form [ onSubmit (if model.valid then Submit else Noop) ]
    [ input [ onInput Input ] []
    , button [ disabled (not model.valid) ] [ "Submit" ]
    ]

update then does nothing on a Noop message. The button is also disabled, but this is secondary, since I also care about form submission by hitting Enter from the text input. Note that it does not work to skip the onSubmit handler, because then hitting Enter will reload the page.

This feels a bit messy and inefficient, so my questions are:

1. What is the idiomatic way to achieve this in Elm?
2. How much more expensive is this use of a no-op message to a no-op Javascript event handler.

Answer 1

First of all, I have to say that your implementation is alright, there's no harm in sending Noop message, that's why it exists.

The best scenario would be to remove the listener entirely(if possible) and disable the button visually. This actually might have a performance drawback if model.valid changes super-frequently.

I'm using a helper for conditionally adding stuff to a list:

appendIf : Bool -> a -> List a -> List a
appendIf flag value list =
    if flag == True then
        list ++ [ value ]
    else
        list

So you could use it like that:

view model =
  button
    ([ type_ "" submit ] |> appendIf model.valid (onClick Submit))
    []