Elm Tutorial - Forms

Main.elm

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)



-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL


type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  , age : String
  , hasError : Bool
  , errorMsg : String
  }


init : Model
init =
  Model "" "" "" "" False ""



-- UPDATE


type Msg
  = Name String
  | Password String
  | PasswordAgain String
  | Age String
  | IsValid


update : Msg -> Model -> Model
update msg model =
  case msg of
    Name name ->
      { model | name = name, hasError = False, errorMsg = "" }

    Password password ->
      { model | password = password, hasError = False, errorMsg = "" }

    PasswordAgain password ->
      { model | passwordAgain = password, hasError = False, errorMsg = "" }

    Age age ->
        { model | age = age }

    IsValid ->
        let
            (isError, errMsg) =
                if String.isEmpty model.name then (True, "Missing name")
                else if model.password /= model.passwordAgain then (True, "Passwords didnt match")
                else if String.length model.password < 8 then (True , "Password too short")
                else if not (String.any Char.isUpper model.password) then (True, "Password must include at least one uppercase letter")
                else if not (String.any Char.isDigit model.password) then (True, "Password must include at least one digit")
                else if not (String.any Char.isLower model.password) then (True, "Password must include at least one lower case letter")
                else if String.length model.age == 0 then (True, "Missing age")
                else if not (String.all Char.isDigit model.age) then (True, "Age must be a number")
                else (False, "")
        in
            { model | hasError = isError, errorMsg = errMsg }




-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Name" model.name Name
    , viewInput "password" "Password" model.password Password
    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain
    , viewInput "number" "Age" model.age Age
    , button [ onClick IsValid ] [ text "Submit" ]
    , viewValidation model.hasError model.errorMsg
    ]


viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
  input [ type_ t, placeholder p, value v, onInput toMsg ] []


viewValidation : Bool -> String -> Html msg
viewValidation hasError  errMsg =
  if not hasError then
    div [ style "color" "green" ] [ text "OK" ]
  else
    div [ style "color" "red" ] [ text errMsg ]