{"id":19788665,"url":"https://github.com/jaredramirez/elm-field","last_synced_at":"2026-06-09T03:38:42.990Z","repository":{"id":62418595,"uuid":"126720016","full_name":"jaredramirez/elm-field","owner":"jaredramirez","description":"Handle input field modeling \u0026 validaton easily.","archived":false,"fork":false,"pushed_at":"2019-08-12T23:57:22.000Z","size":289,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-11T03:52:35.268Z","etag":null,"topics":["elm"],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredramirez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-25T17:05:22.000Z","updated_at":"2019-11-19T18:56:21.000Z","dependencies_parsed_at":"2022-11-01T16:32:12.531Z","dependency_job_id":null,"html_url":"https://github.com/jaredramirez/elm-field","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredramirez%2Felm-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredramirez%2Felm-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredramirez%2Felm-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredramirez%2Felm-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredramirez","download_url":"https://codeload.github.com/jaredramirez/elm-field/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241125061,"owners_count":19913839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm"],"created_at":"2024-11-12T06:28:15.949Z","updated_at":"2026-06-09T03:38:37.958Z","avatar_url":"https://github.com/jaredramirez.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-field\n\nThis library provides a datatype to model and validate input field data\n\n## Installation\n\n    $ elm install jaredramirez/elm-field\n\n## Example\n\nTo use this data type, let's say that you need a sign up form that has a requried name field,\na required email field, and an age field that must be between 18 \u0026 100 that you need to send\nto your server after it's validated.\n\nFirst, you can import the package and create the fields in your model\n\n    ... other imports\n    import Field as F\n    import Field.Int as FInt\n    import Field.String as FStr\n\n    type alias Model =\n        { name : FStr.Field\n        , email : FStr.Field\n        , age : FInt.Field\n        }\n\n\n    init : ( Model, Cmd Msg )\n    init =\n        ( { name = F.init \"\"\n          , email = F.init \"\"\n          , age = F.init 0\n          }\n        , Cmd.none\n        )\n\nThen, you add a few messages to update the fields, and one to submit your form\n\n    type Msg\n        = SetNameField String\n        | SetEmailField String\n        | SetAgeField String\n        | Submit\n\nNext, you add logic to set \u0026 validate the fields to your update function\n\n    update : Msg -\u003e Model -\u003e ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            SetNameField value -\u003e\n                { model\n                    | name =\n                        value\n                            |\u003e F.resetValue model.name\n                            |\u003e validateName\n                }\n                    ! []\n\n            SetEmailField value -\u003e\n                { model\n                    | email =\n                        value\n                            |\u003e F.resetValue model.email\n                            |\u003e validateEmail\n                }\n                    ! []\n\n            SetAgeField value -\u003e\n                { model\n                    | age =\n                        value\n                            |\u003e String.toInt\n                            |\u003e Maybe.withDefault 0\n                            |\u003e F.resetValue model.age\n                            |\u003e validateAge\n                }\n                    ! []\n\n            Submit -\u003e\n                let\n                    name =\n                        validateName model.name\n\n                    email =\n                        validateEmail model.email\n\n                    age =\n                        validateAge model.age\n\n                    cmds =\n                        case ( F.toResult name, F.toResult email, F.toResult age ) of\n                            ( Ok nameValue, Ok emailValue, Ok ageValue ) -\u003e\n                                [ ... some command ... ]\n\n                            _ -\u003e\n                                []\n                in\n                ( { model\n                    | name = name\n                    , email = email\n                    , age = age\n                  }\n                , Cmd.batch cmds\n                )\n\n\n    validateName : FStr.ValidationFunc\n    validateName =\n        FStr.notEmpty\n\n\n    validateEmail : FStr.ValidationFunc\n    validateEmail =\n        FStr.notEmpty \u003e\u003e FStr.email\n\n\n    validateAge : FInt.ValidationFunc\n    validateAge =\n        FInt.greaterThanOrEqual 18 \u003e\u003e FInt.lessThan 100\n\nFinally, wire it into the view!\n\n    view : Model -\u003e Html Msg\n    view model =\n        Html.div []\n            [ Html.h1 [] [ Html.text \"Sign Up!\" ]\n            , F.view (stringFieldConfig \"Name\" SetNameField) model.name\n            , F.view (stringFieldConfig \"Email\" SetEmailField) model.email\n            , F.view (intFieldConfig \"Age\" SetAgeField) model.age\n            , Html.button [ Html.Events.onClick Submit ]\n                [ Html.span [] [ Html.text \"Submit\" ] ]\n            ]\n\n    stringFieldConfig : String -\u003e (String -\u003e msg) -\u003e FStr.ViewConfig msg\n    stringFieldConfig title toMsg =\n        { valid =\n            \\meta value -\u003e\n                Html.div []\n                    [ Html.input\n                        [ Html.Events.onInput toMsg\n                        , Html.Attributes.value value\n                        , Html.Attributes.disabled meta.disabled\n                        ]\n                        []\n                    ]\n        , invalid =\n            \\meta value errorMessage -\u003e\n                Html.div []\n                    [ Html.input\n                        [ Html.Events.onInput toMsg\n                        , Html.Attributes.value value\n                        , Html.Attributes.disabled meta.disabled\n                        ]\n                        []\n                    , Html.span []\n                        [ Html.text errorMessage ]\n                    ]\n        }\n\n    intFieldConfig : String -\u003e (String -\u003e msg) -\u003e FInt.ViewConfig msg\n    intFieldConfig title toMsg =\n        { valid =\n            \\meta value -\u003e\n                Html.div []\n                    [ Html.input\n                        [ Html.Events.onInput toMsg\n                        , Html.Attributes.value (toString value)\n                        , Html.Attributes.type_ \"number\"\n                        , Html.Attributes.disabled meta.disabled\n                        ]\n                        []\n                    ]\n        , invalid =\n            \\meta value errorMessage -\u003e\n                Html.div []\n                    [ Html.input\n                        [ Html.Events.onInput toMsg\n                        , Html.Attributes.value (toString value)\n                        , Html.Attributes.type_ \"number\"\n                        , Html.Attributes.disabled meta.disabled\n                        ]\n                        []\n                    , Html.span []\n                        [ Html.text errorMessage ]\n                    ]\n        }\n\nIn this example, we only use the built-in validators, but it's pretty\nsimple to create your own validators too! Take a look at [an example](https://github.com/jaredramirez/elm-field/blob/master/example/Main.elm) to see a\nsimilar example to the one above but with a custom validator.\n\n## Documentation\n\n[Full Usage Documentation](http://package.elm-lang.org/packages/jaredramirez/elm-field/latest/Field)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredramirez%2Felm-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredramirez%2Felm-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredramirez%2Felm-field/lists"}