implement a submit button in elm form guide

3-form.elm

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String exposing (length)


main =
  Html.beginnerProgram
    { model = { name = "", password = "", passwordAgain = "", validationResult = NotDone }
    , view = view
    , update = update
    }

-- MODEL

type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  , validationResult : ValidationResult
  }

type ValidationResult
    = NotDone
    | Error String
    | ValidationOK

-- UPDATE


type Msg
    = Name String
    | Password String
    | PasswordAgain String
    | Submit


update : Msg -> Model -> Model
update action model =
  case action of
    Name name ->
      { model | name = name }

    Password password ->
      { model | password = password }

    PasswordAgain password ->
      { model | passwordAgain = password }

    Submit ->
      { model | validationResult = validate model}

validate : Model -> ValidationResult
validate model =
  if (String.length model.password) < 3 then
        Error "Password length must be as least 3 chars long"
  else if (model.password /= model.passwordAgain) then
        Error "Passwords do not match!"
  else
        ValidationOK

-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ input [ type' "text", placeholder "Name", onInput Name ] []
    , input [ type' "password", placeholder "Password", onInput Password ] []
    , input [ type' "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
    , button [ onClick Submit ] [ text "submit" ]
    , viewValidation model
    ]

viewValidation : Model -> Html msg
viewValidation model =
  let
    (color, message) =
      case model.validationResult of
        NotDone -> ("", "")
        Error message -> ("red", message)
        ValidationOK -> ("green", "OK")
  in
    div [ style [("color", color)] ] [ text message ]