Bug 27427

Summary: Update the way form validation errors are displayed
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: In Discussion --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: andrewfh, katrin.fischer, martin.renvoize
Version: master   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27289
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Attachments: Bug 27427: Update the way form validation errors are displayed
Bug 27427: (follow-up) Add validation trigger to datepicker

Description Owen Leonard 2021-01-13 17:42:00 UTC
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.

https://zivotdesign.com/n/index.php/s/6WrBe3G8mzoLXsN
Comment 1 Owen Leonard 2021-01-13 18:57:59 UTC
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
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - 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
     checkmark icon.
   - 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.
Comment 2 Owen Leonard 2021-01-13 19:01:08 UTC
(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.
Comment 3 Owen Leonard 2021-01-14 13:32:34 UTC
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.
Comment 4 Owen Leonard 2021-01-14 13:34:16 UTC
(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.
Comment 5 Martin Renvoize 2021-01-15 11:06:54 UTC
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.
Comment 6 Katrin Fischer 2023-07-01 16:04:56 UTC
Hm, the screenshot is no longer available and this would need updating for flatpickr. How should we move on here?