Playing with Elm v0.19.0

form.elm

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)

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

-- Model
type alias Model =
  { name: String
  , email: String
  , validated: Bool
  , error: Bool
  , message: String
  }

init : Model
init = 
  Model "" "" False False ""
  -- Same thing
  -- { name = ""
  -- , email = ""
  -- }

-- Update
type Msg 
  = Name String
  | Email String
  | Submit

update msg model =
    case msg of
        Name name ->
          { model | name = name, validated = False }
        Email email ->
          { model | email = email, validated = False }
        Submit ->
          case doValidation model of
            Err message ->
              { model | validated = True, message = message, error = True }
            Ok message ->
              { model | validated = True, message = message, error = False }
            
-- View

view : Model -> Html Msg
view model =
    Html.form [ onSubmit Submit  ]
      [ input [ type_ "text", value model.name, onInput Name ] [] 
      , input [ type_ "email", value model.email, onInput Email ] [] 
      , div [] [ text (model.name ++ model.email)  ]
      , input [ type_ "submit", value "Submit"] []
      , formValidation model
      ]

formValidation model =
  if model.validated then 
    if model.error then
      div [ style "color" "red" ] [ text model.message ]
    else
      div [ style "color" "green"] [ text model.message ]
  else
    div [] []

doValidation model =
  if model.email == "alvin@gmail.com" then
    Err "email has been taken"
  else
    Ok "ok"