Summary: | Update the way form validation errors are displayed | ||
---|---|---|---|
Product: | Koha | Reporter: | Owen Leonard <oleonard> |
Component: | Templates | Assignee: | 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
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. (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. Hm, the screenshot is no longer available and this would need updating for flatpickr. How should we move on here? |