Breaking changes to form validation #405
Merged
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
.form-group-error - to apply a red border to a .form-group .fom-control-error - to apply a red border to a .form-control This removes the need to set a parent ‘.error’ class - at present this is setting both a border to the left of a form-group div and the border on a form control.
This will apply a red border to the left side of a form-group div
Rather than setting a border on any .form-control that is a direct child of the .error class, require that a new class is explicitly set on any fields with an error - by using .form-control-error
Use this to show how the new form-control-error class can be applied to individual form-control fields.
|
Could we remove the nesting if we were to move towards this approach? |
|
I've had to code around this issue for things previously but using an 'incomplete' class so happy for this change to happen, even if it means I have to revisit some code. Agreed that it should be a major version change to avoid breaking code |
6 tasks
gemmaleigh
changed the title
|
@NickColley's comments about nesting have been addressed, this is ready to merge @robinwhittleton. |
Merged
quis
added a commit
to alphagov/notifications-admin
that referenced
this pull request
Apr 10, 2017
Implements the class name changes detailed in: alphagov/govuk_elements#405
aliuk2012
added a commit
to ministryofjustice/gov_uk_date_fields
that referenced
this pull request
May 3, 2018
This commit updates the markup that this gem produces so that its closer inline with the markup that GOVUK Elements uses https://govuk-elements.herokuapp.com/form-elements/example-date/ It also fixes an issue with error styling which was broken as a result of GDS changing the css class name used to style error messages. The class name changes from `error` to `form-group-error` also each input field also receives a `form-control-error` https://github.com/alphagov/govuk_elements/releases/tag/v3.0.0 alphagov/govuk_elements#405 As this commit introduces new markup and potentially breaking changes for any services relying on the markup for styling or js interaction may want to upgrade with caution. In addition to this update if your project is using GOVUK Elements < 3.0 then you will also need to update your GOVUK Elements version
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.
What problem does the pull request solve?
The styling for form validation is pretty fragile and relies on a parent
.errorselector to apply a red border to the left of a.form-groupdiv. This class also sets a red border on any.form-controlinputs that are direct descendents.Rather than relying on a child div sitting inside a parent for this to work - add two new classes
.form-group-errorand.form-control-error. One will set the border for form-groups and the other for inputs/textareas with a class of form-control.This also solves the problem where there may be multiple
.form-controlelements within a parent.error- and only one of them needs to have a red border - an example of this is the date of birth pattern.Screenshots (if appropriate):
I have added the error examples to the date of birth page:
What type of change is it?
Has the documentation been updated?