validateForm.elm

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String exposing (..)
import Char exposing (..)

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

-- MODEL

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

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

-- UPDATE

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

update: Msg -> Model -> Model
update msg model = 
    case msg of
        Name newName ->
            { model | name = newName }
        
        Password newPassword ->
            { model | password = newPassword }
        
        PasswordAgain newPassword ->
            { model | passwordAgain = newPassword }

        Age newAge ->
            { model | age = newAge }

        Submit ->
            if model.show_validations then
                model
            else
                { model | show_validations = True }

-- 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 "Repeat password", onInput PasswordAgain ] []
    , input [ type_ "text", placeholder "Age", onInput Age ] []
    , button [ onClick Submit ] [ text "submit" ]
    , ul [style (showValidations model) ]  
        [ li [] [ validatePasswordMatch model ]
        , li [] [ validatePasswordLength model ]
        , li [] [ validatePasswordComplexity model ]
        , li [] [ validateAge model ]
        ]
    ]

showValidations: Model -> List (String, String)
showValidations model = 
    if model.show_validations then
        [("visibility", "visible")]
    else
        [("visibility", "hidden")]

validatePasswordMatch: Model -> Html Msg
validatePasswordMatch model =
    let
        test = (model.password == model.passwordAgain) && (model.password /= "")
        okMessage = "OK: passwords match"
        failMessage = "passwords must match"
    in
        validateThing test okMessage failMessage

validatePasswordLength: Model -> Html Msg
validatePasswordLength model =
    let
        test = length model.password > 8
        okMessage = "OK: passwords length"
        failMessage = "password must be longer than 8 characters"
    in
        validateThing test okMessage failMessage

validatePasswordComplexity: Model -> Html Msg
validatePasswordComplexity model = 
    let
        test = (any isDigit model.password) && (any isLower model.password) && (any isUpper model.password)
        okMessage = "OK: password complexity"
        failMessage = "password must contain upper, lower and digits"
    in
        validateThing test okMessage failMessage

validateAge: Model -> Html Msg
validateAge model = 
    let
        test = (all isDigit model.age) && (model.age /= "")
        okMessage = "OK: age"
        failMessage = "age must be a number"
    in
        validateThing test okMessage failMessage
        

validateThing: Bool -> String -> String -> Html Msg
validateThing test okMessage failMessage =
    let 
        (color, msg) =
            if test then
                ("green", okMessage)
            else
                ("red", failMessage)
    in
        div [ style [("color", color)] ] [ text msg ]

validateForm_v2.elm

-- Elm 0.19.0

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
  , age: Int
  , password : String
  , passwordAgain : String
  , hidden: Bool
  }

init : Model
init =
  Model "" 0 "" "" True

-- UPDATE
type Msg
  = Name String
  | Age String
  | Password String
  | PasswordAgain String
  | Hidden 

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

    Age age ->
      case String.toInt age of 
        Nothing ->
          model
        Just a ->
          { model | age = a }

    Password password ->
      { model | password = password }

    PasswordAgain password ->
      { model | passwordAgain = password }

    Hidden ->
      { model | hidden = False }

-- VIEW
view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Name" model.name Name
    , viewInput "text" "Age" (String.fromInt model.age) Age
    , viewInput "password" "Password" model.password Password
    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain
    , button [ onClick Hidden ] [ text "Submit" ]
    , viewValidation model
    ]

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

viewValidation : Model -> Html msg
viewValidation model =
  ul [hidden model.hidden] [ validateMatch model
                           , validateLength model
                           , validateAge model
                           , validateUppercase model
                           , validateLowercase model
                           , validateNumeric model
                           ]

validateMatch model =
  if model.password == model.passwordAgain && not (String.isEmpty model.password) then
    li [ style "color" "green" ] [ text "OK: match" ]
  else
    if String.isEmpty model.password then
      li [ style "color" "red" ] [ text "Password cannot be empty!" ]
    else
      li [ style "color" "red" ] [ text "Passwords do not match!" ]
validateLength model =
  if String.length model.password > 8 then
    li [ style "color" "green" ] [ text "OK: length" ]
  else
    li [ style "color" "red" ] [ text "Password too short!" ]

validateAge model =
  if model.age >= 18 then
    li [ style "color" "green" ] [ text "OK: age" ]
  else
    li [ style "color" "red" ] [ text "Must be 18 or over!" ]

validateUppercase model =
  if String.any Char.isUpper model.password then
    li [ style "color" "green" ] [ text "OK: pw - uppercase" ]
  else
    li [ style "color" "red" ] [ text "Password must contain uppercase!" ]

validateLowercase model =
  if String.any Char.isLower model.password then
    li [ style "color" "green" ] [ text "OK: pw - lowercase" ]
  else
    li [ style "color" "red" ] [ text "Password must contain lowercase!" ]

validateNumeric model =
  if String.any Char.isDigit model.password then
    li [ style "color" "green" ] [ text "OK: pw - numbers" ]
  else
    li [ style "color" "red" ] [ text "Password must contain numbers!" ]