Form validation patterns for conditionally revealing content #286
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Move .error-message out from the parent .error, so we don’t need a parent class to apply an .error-message style (bold 19px red text). - Ungroup .error and .error-summary as error-summary already sets the borders and padding it needs - Fix typo
Use a child combinator to ensure that we only add a red border to .form-controls that are direct descendants of the .error parent class.
|
This looks good to me. One small thing in the example, should "Error message about monthly pay goes here" go above the label text to match the current patterns. |
|
The error message should sit underneath the label text and before the form input, or even better, inside the label - to ensure it is read out by assistive technology. http://govuk-elements.herokuapp.com/errors/#highlight-errors I've deployed a test version of this here, sorry - meant to link to it before so you could preview what's been changed, rather than just comparing the screenshots. Cheers! |
|
I must have been looking at something else, you're right, it's correct. |
|
Hi @robinwhittleton, 👀 on this one please, I think it's good to go. |
|
👍 |
robinwhittleton
pushed a commit
that referenced
this pull request
Aug 24, 2016
- Remove the images path override from the helpers partial ([PR #292](#292)). This will break background images that are currently using the `file-url` function from [the url-helpers partial in the frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit/blob/d54c9b26d314a6e6cb50ba90f6e96ca50049498f/stylesheets/_url-helpers.scss). As `$path` will vary from project to project you will need to define this in your main application stylesheet. - Bump govuk frontend toolkit to 4.16.1 ([PR #288](#288)). This adds space key activation to links with a role of button. - Form validation patterns for conditionally revealing content ([PR #286](#286)) - Centre text on full-width buttons ([PR #289](#289)) - Lint JS code using [StandardJS](http://standardjs.com/) ([PR #290](#290)) *This version deprecates external link styles. If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, [digital-service-designers](https://groups.google.com/a/digital.cabinet-office.gov.uk/forum/#!forum/digital-service-designers) or [opening an issue](https://github.com/alphagov/govuk_elements/issues/new).*
robinwhittleton
pushed a commit
that referenced
this pull request
Aug 25, 2016
- Remove the images path override from the helpers partial ([PR #292](#292)). This will break background images that are currently using the `file-url` function from [the url-helpers partial in the frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit/blob/d54c9b26d314a6e6cb50ba90f6e96ca50049498f/stylesheets/_url-helpers.scss). As `$path` will vary from project to project you will need to define this in your main application stylesheet. - Bump govuk frontend toolkit to 4.16.1 ([PR #288](#288)). This adds space key activation to links with a role of button. - Form validation patterns for conditionally revealing content ([PR #286](#286)) - Centre text on full-width buttons ([PR #289](#289)) - Lint JS code using [StandardJS](http://standardjs.com/) ([PR #290](#290)) *This version deprecates external link styles. If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, [digital-service-designers](https://groups.google.com/a/digital.cabinet-office.gov.uk/forum/#!forum/digital-service-designers) or [opening an issue](https://github.com/alphagov/govuk_elements/issues/new).*
Merged
gemmaleigh
added a commit
to alphagov/govuk-prototype-kit
that referenced
this pull request
Oct 13, 2016
# 2.0.0 - Remove the images path override from the helpers partial ([PR #292](alphagov/govuk_elements#292)). This will break background images that are currently using the `file-url` function from [the url-helpers partial in the frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit/blob/d54c9b2 6d314a6e6cb50ba90f6e96ca50049498f/stylesheets/_url-helpers.scss). As `$path` will vary from project to project you will need to define this in your main application stylesheet. - Bump govuk frontend toolkit to 4.16.1 ([PR #288](alphagov/govuk_elements#288)). This adds space key activation to links with a role of button. - Form validation patterns for conditionally revealing content ([PR #286](alphagov/govuk_elements#286)) - Centre text on full-width buttons ([PR #289](alphagov/govuk_elements#289)) - Lint JS code using [StandardJS](http://standardjs.com/) ([PR #290](alphagov/govuk_elements#290)) *This version deprecates external link styles. If your service has user research that indicates that external links are useful (or not) then we’d like to hear from you either on Slack, [digital-service-designers](https://groups.google.com/a/digital.cabinet- office.gov.uk/forum/#!forum/digital-service-designers) or [opening an issue](https://github.com/alphagov/govuk_elements/issues/new).* # 1.2.2 - Bump govuk frontend toolkit to 4.14.4 (PR #278) - Add a .column-full class (PR #270) - Add a file upload example (PR #268) - Remove the blue outline from the main content area (PR #265) - Fix legend text wrapping in IE (PR #248) # 1.2.1 - Consistent spacing underneath block labels and toggled content (PR #229) - Remove underlines from abbreviations in Firefox (PR #241)
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 2, 2016
- made some minor adjustments to form to look good with new radio/checkbox styles - removed field_with_errors wrapping div which conflicts with new radio/checkbox JS modules Full list of changes: Remove the images path override from the helpers partial alphagov/govuk_elements#292 Bump govuk frontend toolkit to 4.16.1 alphagov/govuk_elements#288 Form validation patterns for conditionally revealing content alphagov/govuk_elements#286 Centre text on full-width buttons alphagov/govuk_elements#289 Lint JS code using StandardJS alphagov/govuk_elements#290 Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0 alphagov/govuk_elements#333 Add a select box example alphagov/govuk_elements#303 Add bullet points describing use of disabled buttons alphagov/govuk_elements#304 Add reasoning for native over custom file inputs Clear floats on details elements alphagov/govuk_elements#328 Add a .bold utility class alphagov/govuk_elements#321 Remove external link styles alphagov/govuk_elements#274 Remove rounded corners on form inputs elements and textareas in iOS alphagov/govuk_elements#342 Fix focus outline on form fields in Chrome / Safari alphagov/govuk_elements#346 Updates the contribution guidelines alphagov/govuk_elements#339 Recommend .visually-hidden over .visuallyhidden alphagov/govuk_elements#341 Add snippets for data visualisation examples alphagov/govuk_elements#350 alphagov/govuk_elements#351 Fix the grey left hand border example for Radios and checkboxes alphagov/govuk_elements#349 Fix the spacing underneath the "inline" block label example alphagov/govuk_elements#348 Custom radios / checkboxes alphagov/govuk_elements#296 Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples alphagov/govuk_elements#364
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 5, 2016
- made some minor adjustments to form to look good with new radio/checkbox styles - removed field_with_errors wrapping div which conflicts with new radio/checkbox JS modules Full list of changes: Remove the images path override from the helpers partial alphagov/govuk_elements#292 Bump govuk frontend toolkit to 4.16.1 alphagov/govuk_elements#288 Form validation patterns for conditionally revealing content alphagov/govuk_elements#286 Centre text on full-width buttons alphagov/govuk_elements#289 Lint JS code using StandardJS alphagov/govuk_elements#290 Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0 alphagov/govuk_elements#333 Add a select box example alphagov/govuk_elements#303 Add bullet points describing use of disabled buttons alphagov/govuk_elements#304 Add reasoning for native over custom file inputs Clear floats on details elements alphagov/govuk_elements#328 Add a .bold utility class alphagov/govuk_elements#321 Remove external link styles alphagov/govuk_elements#274 Remove rounded corners on form inputs elements and textareas in iOS alphagov/govuk_elements#342 Fix focus outline on form fields in Chrome / Safari alphagov/govuk_elements#346 Updates the contribution guidelines alphagov/govuk_elements#339 Recommend .visually-hidden over .visuallyhidden alphagov/govuk_elements#341 Add snippets for data visualisation examples alphagov/govuk_elements#350 alphagov/govuk_elements#351 Fix the grey left hand border example for Radios and checkboxes alphagov/govuk_elements#349 Fix the spacing underneath the "inline" block label example alphagov/govuk_elements#348 Custom radios / checkboxes alphagov/govuk_elements#296 Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples alphagov/govuk_elements#364
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 5, 2016
- made some minor adjustments to form to look good with new radio/checkbox styles Full list of changes: Remove the images path override from the helpers partial alphagov/govuk_elements#292 Bump govuk frontend toolkit to 4.16.1 alphagov/govuk_elements#288 Form validation patterns for conditionally revealing content alphagov/govuk_elements#286 Centre text on full-width buttons alphagov/govuk_elements#289 Lint JS code using StandardJS alphagov/govuk_elements#290 Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0 alphagov/govuk_elements#333 Add a select box example alphagov/govuk_elements#303 Add bullet points describing use of disabled buttons alphagov/govuk_elements#304 Add reasoning for native over custom file inputs Clear floats on details elements alphagov/govuk_elements#328 Add a .bold utility class alphagov/govuk_elements#321 Remove external link styles alphagov/govuk_elements#274 Remove rounded corners on form inputs elements and textareas in iOS alphagov/govuk_elements#342 Fix focus outline on form fields in Chrome / Safari alphagov/govuk_elements#346 Updates the contribution guidelines alphagov/govuk_elements#339 Recommend .visually-hidden over .visuallyhidden alphagov/govuk_elements#341 Add snippets for data visualisation examples alphagov/govuk_elements#350 alphagov/govuk_elements#351 Fix the grey left hand border example for Radios and checkboxes alphagov/govuk_elements#349 Fix the spacing underneath the "inline" block label example alphagov/govuk_elements#348 Custom radios / checkboxes alphagov/govuk_elements#296 Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples alphagov/govuk_elements#364
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds two more examples to the form elements example page.
This fixes the issue with inputs using the
.form-controlclass inheriting a red border, when a parent.errorclass is used.Before:
After:
There is an example of this working here:
http://govuk-elements-test.herokuapp.com/form-elements/example-form-elements/#example-conditional-errors
cc. @trevorsaint, @gavboulton, @robinwhittleton.
This fixes #249.