This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.1 1.1.0
Capture form data better
version 1.0.0
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2018-07-25 18:18:10 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1



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

About BigBinary


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.