From 02070c85e71540481f9e6ab932fa03f2976a9f47 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 13 Jan 2021 17:45:25 +0000 Subject: [PATCH] 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. --- koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss | 11 +++++++++++ koha-tmpl/intranet-tmpl/prog/js/staff-global.js | 9 +++++++++ 2 files changed, 20 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 6d03d1a310..265690dafa 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -3573,6 +3573,17 @@ span { color: #C00; font-style: italic; margin-left: .5em; + &.required-valid { + color: green; + &::before { + content: "\f00c"; + display: inline-block; + font-family: FontAwesome; + font-style: normal; + margin-right: 5px; + width: 1em; + } + } } &.important { diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js index 4f06af9465..b1d94f2343 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js +++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js @@ -358,3 +358,12 @@ function saveOrClearSimpleSearchParams() { localStorage.setItem('cat_search_pulldown_selection', pulldown_selection ); localStorage.setItem('searchbox_value', searchbox_value ); } + +jQuery.validator.setDefaults({ + highlight: function (element) { + $(element).nextAll("span.required").hide().removeClass("required-valid"); + }, + unhighlight: function (element) { + $(element).nextAll("span.required").show().addClass("required-valid"); + }, +}); -- 2.11.0