cstuncsik/Main.elm

## elm-package.json
{
    "version": "1.0.0",
    "summary": "https://guide.elm-lang.org/architecture/user_input/forms.html",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 5.1.1",
        "elm-lang/html": "2.0.0 <= v < 2.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

## index.html
<html>
<body>
  <script>
    var app = Elm.Main.fullscreen()
  </script>
</body>
</html>

## Main.elm
module Main exposing (..)

import String
import Regex
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)


main : Program Never Model Msg
main =
    Html.beginnerProgram { model = model, view = view, update = update }


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


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


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


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

        Age age ->
            { model | age = age }

        Password password ->
            { model | password = password }

        PasswordAgain password ->
            { model | passwordAgain = password }


view : Model -> Html Msg
view model =
    div []
        [ input [ type_ "text", placeholder "Name", onInput Name ] []
        , input [ type_ "text", placeholder "Age", onInput Age ] []
        , input [ type_ "password", placeholder "Password", onInput Password ] []
        , input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
        , viewPasswordValidation model
        , viewAgeValidation model
        ]


viewPasswordValidation : Model -> Html Msg
viewPasswordValidation model =
    let
        ( color, message ) =
            if model.password == model.passwordAgain then
                if String.length model.password < 3 then
                    ( "red", "Password too short" )
                else if not (Regex.contains (Regex.regex "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).+$") model.password) then
                    ( "red", "Password must have uppercase, lowercase letters and numbers" )
                else
                    ( "green", "OK" )
            else
                ( "red", "Passwords do not match!" )
    in
        div [ style [ ( "color", color ) ] ] [ text message ]


viewAgeValidation : Model -> Html Msg
viewAgeValidation model =
    let
        ( color, message ) =
            if Regex.contains (Regex.regex "\\d+") model.age then
                ( "green", "OK" )
            else
                ( "red", "Age must be a number" )
    in
        div [ style [ ( "color", color ) ] ] [ text message ]
	{
	"version": "1.0.0",
	"summary": "https://guide.elm-lang.org/architecture/user_input/forms.html",
	"repository": "https://github.com/user/project.git",
	"license": "BSD3",
	"source-directories": [
	"."
	],
	"exposed-modules": [],
	"dependencies": {
	"elm-lang/core": "5.1.1 <= v < 5.1.1",
	"elm-lang/html": "2.0.0 <= v < 2.0.0"
	},
	"elm-version": "0.18.0 <= v < 0.19.0"
	}
	<html>
	<body>
	<script>
	var app = Elm.Main.fullscreen()
	</script>
	</body>
	</html>
	module Main exposing (..)

	import String
	import Regex
	import Html exposing (..)
	import Html.Attributes exposing (..)
	import Html.Events exposing (onInput)


	main : Program Never Model Msg
	main =
	Html.beginnerProgram { model = model, view = view, update = update }


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


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


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


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

	Age age ->
	{ model \| age = age }

	Password password ->
	{ model \| password = password }

	PasswordAgain password ->
	{ model \| passwordAgain = password }


	view : Model -> Html Msg
	view model =
	div []
	[ input [ type_ "text", placeholder "Name", onInput Name ] []
	, input [ type_ "text", placeholder "Age", onInput Age ] []
	, input [ type_ "password", placeholder "Password", onInput Password ] []
	, input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
	, viewPasswordValidation model
	, viewAgeValidation model
	]


	viewPasswordValidation : Model -> Html Msg
	viewPasswordValidation model =
	let
	( color, message ) =
	if model.password == model.passwordAgain then
	if String.length model.password < 3 then
	( "red", "Password too short" )
	else if not (Regex.contains (Regex.regex "^(?=.[a-z])(?=.[A-Z])(?=.*\\d).+$") model.password) then
	( "red", "Password must have uppercase, lowercase letters and numbers" )
	else
	( "green", "OK" )
	else
	( "red", "Passwords do not match!" )
	in
	div [ style [ ( "color", color ) ] ] [ text message ]


	viewAgeValidation : Model -> Html Msg
	viewAgeValidation model =
	let
	( color, message ) =
	if Regex.contains (Regex.regex "\\d+") model.age then
	( "green", "OK" )
	else
	( "red", "Age must be a number" )
	in
	div [ style [ ( "color", color ) ] ] [ text message ]