I would like to update the way form validation errors are shown by the jQuery validation plugin. The changes depend on the plugin's event handler for "valid" and "invalid" inputs.
Upon being checked by the plugin, a valid input will have any following <span class="required"> styled green and with a check mark to indicate validity.
An invalid input will have any following <span class="required"> hidden and the jQuery validation error shown instead.
Created attachment 115118 [details] [review]
Bug 27427: Update the way form validation errors are displayed
This patch adds a global default configuration for the jQuery Validation
plugin for handling how some error messages are displayed during the
process of filling out a form.
To test, apply the patch and rebuild the staff client CSS
- In the staff client, test pages which use the jQuery form validation
plugin, e.g. Administration -> Libraries -> New library.
- When the page first displays, the library code and name fields
should have a "Required" label following the inputs.
- Enter data in each of these fields. When you tab out of the field,
the "Required" label should turn green and be prepended with a
- When you empty the field you should see the default error message
for required field, "This field is required."
- Entering data again should hide this error and redisplay the label
with the "valid" class.
- Trying to submit the form when it is an invalid state should still
block form submission and put focus in the first invalid field.
- Test other pages which use jQuery form validation: Patron entry,
list creation, budget creation, etc.
Known issue: Although a "change" event fires when a datepicker input is
first populated, the normal validation event isn't triggered. I'm not
sure why. This means that date inputs will still show the default red
"Required" label unless they're set again or the form is submitted.
(In reply to Owen Leonard from comment #1)
> Known issue: Although a "change" event fires when a datepicker input is
> first populated, the normal validation event isn't triggered.
I'm torn about whether this is a blocker. The validation behavior of datepicker inputs won't be any different than before the patch but they will be different than other validated fields.
I could use another set of eyes on it.
Created attachment 115160 [details] [review]
Bug 27427: (follow-up) Add validation trigger to datepicker
This patch adds a default action to the datepicker plugin, triggering an
"onSelect" event which checks to see if the field is valid according to
the jQuery validation plugin.
This change attempts to fix a problem where validation isn't triggered
by the typical onkeyup or blur events because the field is updated by
the datepicker plugin.
(In reply to Owen Leonard from comment #3)
> Created attachment 115160 [details] [review] [review]
> Bug 27427: (follow-up) Add validation trigger to datepicker
This improves *some* datepicker instances but not all. For example, it works on the member entry page if dateofbirth is set to be mandatory. However it doesn't work on pages like budget creation or vendor contract creation.
I like this improvement.. but I am wondering a little about the three different states we now how..
Validation not yet triggered
* Red field label + Red Italic `Required`
Validation triggered and failed
* Red field label + Red Bold `This field is required.`
Validation triggered and success
* Red field label + Green Italic `✓ Required`
Whilst I sort of like the additional highlight that somethings still wrong upon validation having triggered.. I'm not sure a completely different string is the right approach... should we just bolden the already italic 'Required' text perhaps.
Also, upon successful validation, should the field label also be made green perhaps.. the mix of red label + green required is a little confusing?
I'm also a little tenuous on exactly 'when' validation takes place for various fields in various forms... in some, like the point of sale, we validate during form entry.. in others we only trigger the validation at form completion.
I tend to like 'during entry' as you get the feedback that you've completed things as you work through the form.