Elm guide user input form, with all bonus exercises completed. https://guide.elm-lang.org/architecture/user_input/forms.html

form.elm

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

main =
  App.beginnerProgram { model = model, view = view, update = update }


-- MODEL

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

model : Model
model =
  Model "" "" "" "" False

-- UPDATE

type Msg
  = Name String
  | Password String
  | PasswordAgain String
  | Age String
  | ShowErr Bool

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

    Password password ->
      { model | password = password }

    PasswordAgain password ->
      { model | passwordAgain = password }

    Age age ->
      { model | age = age }

    ShowErr showErr ->
      { model | showErr = showErr }

-- 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 ] []
    , input [ type' "text", placeholder "Age", onInput Age ] []
    , input [ type' "submit", onClick (ShowErr True) ] []
    , pwEqualReq model
    , pwLengthReq model
    , pwDiverseReq model
    , ageNumReq model
    ]

pwEqualReq : Model -> Html msg
pwEqualReq model =
  if model.showErr then
    let
      (color, message) =
        if model.password == model.passwordAgain then
          ("green", "OK")
        else
          ("red", "Passwords do not match!")
    in
      div [ style [("color", color)] ] [ text message ]
  else text ""

pwLengthReq : Model -> Html msg
pwLengthReq model =
  if model.showErr then
    let
      (color, message) =
        if String.length model.password >= 8 then
          ("green", "OK")
        else
          ("red", "Password is shorter than 8")
    in
      div [ style [("color", color)] ] [ text message ]
  else text ""

pwDiverseReq : Model -> Html msg
pwDiverseReq model =
  if model.showErr then
    let
      (color, message) =
        if Regex.contains (Regex.regex "[a-z]") model.password
        && Regex.contains (Regex.regex "[A-Z]") model.password
        && Regex.contains (Regex.regex "[0-9]") model.password then
          ("green", "OK")
        else
          ("red", "Password must contain upper case, lower case and numerics")
    in
      div [ style [("color", color)] ] [ text message ]
  else text ""

ageNumReq : Model -> Html msg
ageNumReq model =
  if model.showErr then
    let
      (color, message) =
        if not (Regex.contains (Regex.regex "[^0-9]") model.age) then
          ("green", "OK")
        else
          ("red", "Age must be a number")
    in
      div [ style [("color", color)] ] [ text message ]
  else text ""