Feature/date styling and validation #20

MattOz-CDS · 2022-05-10T14:09:54Z

Summary of change

We want inline validation error messages to appear above form input fields as per the GDS pattern
https://design-system.service.gov.uk/components/error-summary/

To test

Enable the LocalGov forms module
Create a form with form elements that are required
In the forms behaviour settings disable client-side validation
Complete and submit a form with errors
Verify that validation errors appear above the erroneous input field

…er' into wip/all-pr-2021-10-20

…21-10-20 Added date element styling

Added a media query to deal with field sizes on mobile. Make selectors more date field specific.

…' into wip/all-pr-2021-10-20

Date validation

…21-10-20

The localgov_os_places Geocoder plugin has moved to the localgov_geo module. As such, localgov_forms.geocoder.schema.yml has also moved to the localgov_geo module and now lives on as localgov_geo.geocoder.schema.yml.

The manual address entry button labelled "Can't find the address?" is displayed at all times at the moment. This new configuration captures whether to reveal this button from the beginning or only after an address search has happened.

Display the Manual address entry button labelled "Can't find the address?" based on address lookup element configuration.

Adding a new Webform config where the Manual address entry button is displayed *after* an address search. This Webform is then used in a new test to verify the behaviour of the manual address entry button.

…dress-button-display-cfg "Can't find the address?" button display configuration

…alidation Date styling and validation

Adnan-cds

Works for me. Thanks a lot.

I don't know if Javascript is the best way to move a form error message above its target form element. But this should do for now.

js/error_message_above_input_field.js

Adnan-cds · 2022-05-31T16:24:42Z

Hi Matt,
Following suggestions from Ekes and Stephen Cox during the Merge Monday meeting, I have had another look at the theme templates and sure enough, the error message placement can be easily controlled from form-element.html.twig. Not sure how I missed it the first time, but it is fairly simple.

Please note that if the error message placement is to be controlled from form-element.html.twig then this has to happen in the theme instead of the localgov_forms module. This means every site that wants this feature will have to override form-element.html.twig. Or at least the localgov_base theme should override it. Is that going to be a problem?

@MattOz-CDS @ekes @stephen-cox @cjstevens78

finnlewis · 2022-06-06T13:48:43Z

Leaving this with @MattOz-CDS for now to make a call.

The checkdate() function in PHP 8.x throws TypeErrors when any non-numeric argument is passed. In previous version of PHP it only logged a warning.

Suppress further PHP warning.

MattOz-CDS · 2022-08-03T19:17:34Z

Hi Finn,
Apologies for my delay in getting back onto this decision. Thanks for your recommendation @stephen-cox, @ekes and @Adnan-cds. I agree am happy for validation error control to be taken care of at a theme level.
Thanks again.

@finnlewis, @ekes, @stephen-cox and @Adnan-cds

…lidation

Adnan-cds · 2022-08-08T14:11:51Z

Closing as I merged some unwanted commits to this pull request earlier. This pull request has been replaced with #25.

MattOz-CDS and others added 28 commits October 19, 2021 18:49

Added HTML attributes and date validation constriant

68efc61

Fixed coding standard issues

f335acb

Fixed coding standard issues

c10c240

Fixed coding standard issues

0691a9f

Fixed coding standard issues

7644b9c

Fixed coding standard issues

ca3b0cc

Merge remote-tracking branch 'remotes/origin/feature/os-places-geocod…

bd38d32

…er' into wip/all-pr-2021-10-20

Added styling to localgov forms date element

274a9df

Merge branch 'feature/localgov-forms-date-styling' into wip/all-pr-20…

ded7731

…21-10-20 Added date element styling

Merge branch '1.x' into wip/all-pr-2021-10-20

cc02aec

Add media query and selectors

5e78b4d

Added a media query to deal with field sizes on mobile. Make selectors more date field specific.

Merge remote-tracking branch 'origin/fix/3-non-existent-php-interface…

7ef75a7

…' into wip/all-pr-2021-10-20

Merge pull request #16 from localgovdrupal/feature/date-validation

072b3c3

Date validation

Removed redundant function and applied coding standard

c3726a3

Merge branch 'feature/localgov-forms-date-styling' into wip/all-pr-20…

18275ce

…21-10-20

Chore: Deleting unneeded config schema.

fd54bcd

The localgov_os_places Geocoder plugin has moved to the localgov_geo module. As such, localgov_forms.geocoder.schema.yml has also moved to the localgov_geo module and now lives on as localgov_geo.geocoder.schema.yml.

Feature: Config for manual address entry.

c1b8ea9

The manual address entry button labelled "Can't find the address?" is displayed at all times at the moment. This new configuration captures whether to reveal this button from the beginning or only after an address search has happened.

Feature: Conditional display of Manual address entry button.

528d7b1

Display the Manual address entry button labelled "Can't find the address?" based on address lookup element configuration.

Test: Manual address entry button.

14273d6

Adding a new Webform config where the Manual address entry button is displayed *after* an address search. This Webform is then used in a new test to verify the behaviour of the manual address entry button.

Test: Deprecated code usage fixes.

143ea9b

Merge pull request #19 from localgovdrupal/feature/9-cant-find-the-ad…

16bced4

…dress-button-display-cfg "Can't find the address?" button display configuration

Added validation above input field

7ebea9b

Corrected comment typo

d21c8eb

Fixed coding standard error

47ebb2e

Fixed coding standard error in libraries yaml

efc3002

Merge pull request #21 from localgovdrupal/feature/date-styling-and-v…

0fab376

…alidation Date styling and validation

Added the localgov date field required error class

8e43465

Added the localgov date field required error class

8c6abfa

MattOz-CDS force-pushed the feature/date-styling-and-validation branch from cb5349c to 7f72def Compare May 20, 2022 16:32

Merge branch '1.x' into feature/date-styling-and-validation

c94ebe9

MattOz-CDS added 2 commits May 26, 2022 18:14

Added amd amended if condition

5fb1e99

Coding standard fix - added comment

4378a76

MattOz-CDS force-pushed the feature/date-styling-and-validation branch from a4fd699 to 4378a76 Compare May 26, 2022 17:35

MattOz-CDS added 10 commits May 27, 2022 11:05

Removed unneeded function

607bdfa

Added a check to see thatform element is a localgov form date element

38e1a08

Removed classes from classList contains function

40988c4

Removed redundant twig templates

246accc

Removed commented code

b2e6f30

Removed classes from classList contains function

7048cd4

Removed unneeded theme function

6c2c81e

Added theme wrapper declaration

d28e7b4

Amended if condition

e3d15ad

Added date styling fix

29e4863

Adnan-cds approved these changes May 27, 2022

View reviewed changes

js/error_message_above_input_field.js Outdated Show resolved Hide resolved

MattOz-CDS and others added 7 commits June 7, 2022 17:36

Removed js that moved the error message above form inpuut

5dd5a81

Removed reference to js from localgov_forms.libraries.yml

5204af2

Updated workflow

04e9d7d

Coding Standards fix

a9eee6a

Coding standards: Resolved deprecation notice.

f9bd92b

Fix: Non-numeric date handling for PHP 8.x.

a5926eb

The checkdate() function in PHP 8.x throws TypeErrors when any non-numeric argument is passed. In previous version of PHP it only logged a warning.

Fix: Non-numeric date handling for PHP 8.x.

5361b4c

Suppress further PHP warning.

Merge branch 'wip/all-pr-2021-10-20' into feature/date-styling-and-va…

c199a9f

…lidation

finnlewis requested review from ekes and stephen-cox August 8, 2022 13:08

Adnan-cds mentioned this pull request Aug 8, 2022

Date styling #25

Merged

Adnan-cds closed this Aug 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/date styling and validation #20

Feature/date styling and validation #20

Uh oh!

MattOz-CDS commented May 10, 2022 •

edited

Loading

Uh oh!

Adnan-cds left a comment

Uh oh!

Uh oh!

Adnan-cds commented May 31, 2022

Uh oh!

finnlewis commented Jun 6, 2022

Uh oh!

MattOz-CDS commented Aug 3, 2022 •

edited

Loading

Uh oh!

Adnan-cds commented Aug 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Feature/date styling and validation #20

Feature/date styling and validation #20

Uh oh!

Conversation

MattOz-CDS commented May 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Adnan-cds left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Adnan-cds commented May 31, 2022

Uh oh!

finnlewis commented Jun 6, 2022

Uh oh!

MattOz-CDS commented Aug 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Adnan-cds commented Aug 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MattOz-CDS commented May 10, 2022 •

edited

Loading

MattOz-CDS commented Aug 3, 2022 •

edited

Loading