Error handling: replace alert() messages with inline error text for form validation #1349
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Successor to PR 1308 that got too messy..
Jethro has old-school error reporting: Javascript alerts:
For forms, it would be better to highlight the missing/incorrect form field value, with the error message below it.
This PR attempts to fix this. E.g. on /members login, rather than an alert:
Testing
Email
Email fields were not previously validated, because the code (in general.php) did not add a
valid-emailclass, because (I think) it tries to handle text and email in one codepath.Anyway, emails are now validated.
Screencast_20250917_205920.webm
Bible refs
E.g. at Services -> List All -> Edit Schedule
Screencast_20250917_210454.webm
Dates (day, year fields)
This shows how a single 'control group' can have two kinds of error message (for day and year):
Screencast_20250917_210606.webm
Phone numbers
Screencast_20250917_211703.webm
Also, phone numbers were previously only validated on submit, not on field blur.
Regex-validated inputs
E.g. a WWCC person field configured with regex:
Screencast_20250917_212855.webm
Note, HTML has its own regex input validation these days, via a
patternattribute. I used it too, just out of curiousity. It makes the text go red until the regex matches.data-require-fieldsJethro has a
data-require-fieldsattribute, which can be set on a submit button. It allows one to dynamically make an input required. Currently this is only used in person bulk actions.Validation only takes place when the button is pressed:
Screencast_20250917_213601.webm