dillonkearns/elm-pages-v3-beta
1
1
Fork 0
mirror of https://github.com/dillonkearns/elm-pages-v3-beta.git synced 2024-12-26 13:21:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Disable submit button when there are form errors.

Browse Source
This commit is contained in:
Dillon Kearns 2022-01-06 11:42:49 -08:00
parent 2e4f87767f
commit b6e45b7a14
2 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
examples/pokedex/src/Page/TailwindForm.elm
View File

@ -319,7 +319,7 @@ form user =
) )
|> Form.append |> Form.append
(Form.submit (Form.submit
(\{ attrs } -> (\{ attrs, formHasErrors } ->
Html.div Html.div
[ css [ css
[ Tw.pt_5 [ Tw.pt_5
@ -332,7 +332,7 @@ form user =
] ]
] ]
[ cancelButton [ cancelButton
, saveButton attrs , saveButton formHasErrors attrs
] ]
] ]
) )
@ -345,7 +345,7 @@ type PushNotificationsSetting
| PushNone | PushNone
saveButton formAttrs = saveButton formHasErrors formAttrs =
Html.button Html.button
(styleAttrs formAttrs (styleAttrs formAttrs
++ [ css ++ [ css
@ -368,9 +368,17 @@ saveButton formAttrs =
, Tw.ring_offset_2 , Tw.ring_offset_2
, Tw.ring_indigo_500 , Tw.ring_indigo_500
] ]
, Css.hover , if formHasErrors then
[ Tw.bg_indigo_700 Css.batch
] [ Tw.text_gray_200
, Tw.bg_indigo_500
, Tw.cursor_default
]
else
Css.hover
[ Tw.bg_indigo_700
]
] ]
] ]
) )

47
src/Form.elm
View File

@ -3,6 +3,7 @@ module Form exposing (..)
import DataSource exposing (DataSource) import DataSource exposing (DataSource)
import Date exposing (Date) import Date exposing (Date)
import Dict exposing (Dict) import Dict exposing (Dict)
import Dict.Extra
import Html exposing (Html) import Html exposing (Html)
import Html.Attributes as Attr import Html.Attributes as Attr
import Html.Events import Html.Events
@ -47,7 +48,8 @@ type alias FieldInfoSimple view =
, required : Bool , required : Bool
, serverValidation : Maybe String -> DataSource (List String) , serverValidation : Maybe String -> DataSource (List String)
, toHtml : , toHtml :
FinalFieldInfo Bool
-> FinalFieldInfo
-> Maybe { raw : Maybe String, errors : List String } -> Maybe { raw : Maybe String, errors : List String }
-> view -> view
, properties : List ( String, Encode.Value ) , properties : List ( String, Encode.Value )
@ -62,7 +64,8 @@ type alias FieldInfo value view =
, required : Bool , required : Bool
, serverValidation : Maybe String -> DataSource (List String) , serverValidation : Maybe String -> DataSource (List String)
, toHtml : , toHtml :
FinalFieldInfo Bool
-> FinalFieldInfo
-> Maybe { raw : Maybe String, errors : List String } -> Maybe { raw : Maybe String, errors : List String }
-> view -> view
, decode : Maybe String -> Result String value , decode : Maybe String -> Result String value
@ -315,7 +318,7 @@ text name toHtmlFn =
, required = False , required = False
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \_ fieldInfo info ->
toHtmlFn (toInputRecord name Nothing info fieldInfo) toHtmlFn (toInputRecord name Nothing info fieldInfo)
-- TODO should it be Err if Nothing? -- TODO should it be Err if Nothing?
@ -339,7 +342,7 @@ hidden name value toHtmlFn =
-- TODO shouldn't be possible to include any server-side validations on hidden fields -- TODO shouldn't be possible to include any server-side validations on hidden fields
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \_ fieldInfo info ->
-- TODO shouldn't be possible to add any validations or chain anything -- TODO shouldn't be possible to add any validations or chain anything
toHtmlFn (toInputRecord name Nothing info fieldInfo |> .toInput) toHtmlFn (toInputRecord name Nothing info fieldInfo |> .toInput)
@ -401,7 +404,7 @@ radio name nonEmptyItemMapping toHtmlFn wrapFn =
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
-- TODO use `toString` to set value -- TODO use `toString` to set value
\fieldInfo info -> \_ fieldInfo info ->
items items
|> List.map (\item -> toHtmlFn item (toRadioInputRecord name (toString item) info fieldInfo)) |> List.map (\item -> toHtmlFn item (toRadioInputRecord name (toString item) info fieldInfo))
|> wrapFn |> wrapFn
@ -434,6 +437,7 @@ radio name nonEmptyItemMapping toHtmlFn wrapFn =
submit : submit :
({ attrs : List (Html.Attribute Msg) ({ attrs : List (Html.Attribute Msg)
, formHasErrors : Bool
} }
-> view -> view
) )
@ -446,10 +450,21 @@ submit toHtmlFn =
, required = False , required = False
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \formHasErrors fieldInfo info ->
let
disabledAttrs =
if formHasErrors then
[ Attr.attribute "disabled" "" ]
else
[]
in
toHtmlFn toHtmlFn
{ attrs = { attrs =
[ Attr.type_ "submit" ] [ Attr.type_ "submit"
]
++ disabledAttrs
, formHasErrors = formHasErrors
} }
, decode = \_ -> Ok () , decode = \_ -> Ok ()
, properties = [] , properties = []
@ -467,7 +482,7 @@ view viewFn =
, required = False , required = False
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \_ fieldInfo info ->
viewFn viewFn
, decode = \_ -> Ok () , decode = \_ -> Ok ()
, properties = [] , properties = []
@ -492,7 +507,7 @@ number name toHtmlFn =
, required = False , required = False
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \_ fieldInfo info ->
toHtmlFn (toInputRecord name Nothing info fieldInfo) toHtmlFn (toInputRecord name Nothing info fieldInfo)
, decode = , decode =
\rawString -> \rawString ->
@ -521,7 +536,7 @@ requiredNumber name toHtmlFn =
, required = False , required = False
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \_ fieldInfo info ->
toHtmlFn (toInputRecord name Nothing info fieldInfo) toHtmlFn (toInputRecord name Nothing info fieldInfo)
, decode = , decode =
\rawString -> \rawString ->
@ -552,7 +567,7 @@ date name toHtmlFn =
, required = False , required = False
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \_ fieldInfo info ->
toHtmlFn (toInputRecord name Nothing info fieldInfo) toHtmlFn (toInputRecord name Nothing info fieldInfo)
, decode = , decode =
\rawString -> \rawString ->
@ -589,7 +604,7 @@ checkbox name initial toHtmlFn =
, required = False , required = False
, serverValidation = \_ -> DataSource.succeed [] , serverValidation = \_ -> DataSource.succeed []
, toHtml = , toHtml =
\fieldInfo info -> \_ fieldInfo info ->
toHtmlFn (toInputRecord name Nothing info fieldInfo) toHtmlFn (toInputRecord name Nothing info fieldInfo)
, decode = , decode =
\rawString -> \rawString ->
@ -893,6 +908,13 @@ toHtml :
-> Form value view -> Form value view
-> view -> view
toHtml toForm serverValidationErrors (Form fields decoder serverValidations modelToValue) = toHtml toForm serverValidationErrors (Form fields decoder serverValidations modelToValue) =
let
hasErrors_ : Bool
hasErrors_ =
Dict.Extra.any
(\key value -> not (List.isEmpty value.errors))
serverValidationErrors
in
toForm toForm
[ Attr.method "POST" [ Attr.method "POST"
] ]
@ -905,6 +927,7 @@ toHtml toForm serverValidationErrors (Form fields decoder serverValidations mode
|> List.map |> List.map
(\field -> (\field ->
field.toHtml field.toHtml
hasErrors_
(simplify3 field) (simplify3 field)
(serverValidationErrors (serverValidationErrors
|> Dict.get field.name |> Dict.get field.name