A Field is a simple data type that helps capture and validate form data better. The left side of a field represents a function that takes in a value of arbitrary type, validates it and returns a ValidationResult.

The ValidationResult can contain the value of the field if the validation Passed, or an error if the validation Failed

Assume that we have a form with name, email and phone as inputs. Then we can define these as Fields as follows

import Field exposing (..)
import Field.ValidationResult exposing (..)

type alias Model =
    { name : Field String String
    , email : Field String String
    , phone : Field String String
    }

The left String of a Field refers to the error and the right String refers to the actual value type

We can initialize these as follows

init =
    { name = Field validateEmpty ""
    , email = Field (validateEmpty >> andThen validateEmail) ""
    , phone = Field validateNumbersOnly ""
    }

The Field constructor takes two arguments. The first one is a validation function which takes in value of the field and produces a ValidationResult type

validateEmpty : String -> ValidationResult String String
validateEmpty s =
    case s of
        "" ->
            Failed "Field cannot be empty"

        _ ->
            Passed s

Validate a Field using the validate function.

Example of a Passed validation:

name = Field validateEmpty "John Doe"

nameValidationResult = validate name

-- nameValidationResult == Passed "John Doe"

Example of a Failed validation:

email = Field validateEmpty ""

emailValidationResult = validate email

-- emailValidationResult == Failed "Field cannot be empty"

Refer example for more

Refer documentation here

elm-reader is maintained by BigBinary. BigBinary is a software consultancy company. We build web and mobile applications using Ruby on Rails, React.js, React Native and Elm.