fix validation skipping#60
Conversation
✅ Deploy Preview for tiny-form-fields ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
||
| else | ||
| [ Attr.pattern ".*" ] | ||
| [ Attr.pattern ".+" ] |
There was a problem hiding this comment.
more accurate since we do want them to fill this in (it is a required field even without the pattern)
There was a problem hiding this comment.
Makes sense — .+ enforces non-empty even with no other constraint. Good.
| div [ class "tff-error-text" ] [ text "Question titles must be unique in a form" ] | ||
|
|
||
| else if isEmptyLabel then | ||
| div [ class "tff-error-text" ] [ text "Question title cannot be empty" ] |
There was a problem hiding this comment.
since we show err message for duplicate, why not also empty
There was a problem hiding this comment.
Agreed — matching the duplicate-label message keeps the inline feedback consistent.
|
Discuss Note: in a conversation, the human speech bubbles would be more noteworthy than the agent's speech bubbles |
| , Cmd.none | ||
| ) | ||
| ( Just prevIndex, _ ) -> | ||
| if selectedFieldIsInvalid model then |
There was a problem hiding this comment.
i kept the if selectedFieldIsInvalid model then and added an animation if user tries to click away because i think its still a better ux than allowing them to close the tab and not understand why the form is invalid
the scattering of if statement is addressed in #60 (comment)
yellow.mov
There was a problem hiding this comment.
Agree the animate-and-scroll beats silently letting them close a broken field. One gap: this guard only checks empty/duplicate, but the new form gate also catches ChooseMultiple min/max — so a min/max error blocks submission with no field highlight. Can we drive this guard from the same rule source so they can't drift?
| , value (Json.Encode.encode 0 (encodeFormFields model.formFields)) | ||
| ] | ||
| [] | ||
| :: viewEditorValidationGate model.formFields |
There was a problem hiding this comment.
validate form on model update instead of only scattering if selectedFieldIsInvalid
There was a problem hiding this comment.
Like moving to a central editorFormValidity instead of scattering. Since it now knows more rules than selectedFieldIsInvalid, can selectedFieldIsInvalid be derived from it (filtered to the selected field)? Then there's one source of truth and the scattered call sites stay as thin UX wrappers.
| app.ports.scrollIntoView.subscribe((id) => { | ||
| var el = document.getElementById(id); | ||
| if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | ||
| }); |
There was a problem hiding this comment.
on top of animating an invalid field, it scrolls to it
if selectedFieldIsInvalid model then
( { model | viewMode = Editor { maybeAnimate = Just ( prevIndex, AnimateYellowFade ) } }
, Cmd.batch
[ Process.sleep animateFadeDuration
|> Task.perform (always (SetEditorAnimate Nothing))
, scrollIntoView ("tff-field-" ++ String.fromInt prevIndex)
]
)
There was a problem hiding this comment.
Nice touch. One thing to confirm: the gate input is visually-hidden + aria-hidden, so when the browser blocks submit does its title message actually surface, or does focus land on an invisible element? Want to make sure the min/max case isn't a silent block.
2 participants
problem: users are able to bypass invalid states in the field settings by creating a new input with valid state
video shows
bug.mov
same thing for dup checks
emailbug.mov
after fix
actions will be disabled if field settings are invalid
for dup
fixdup.mov
for empty
afterfix.mov