New errors and validation guidance for review #71
Conversation
- Update guidance to match the Hackpad - Show two examples, one with radio buttons and one with multiple questions - Fix incorrect IDs for alpha and beta banner content
Two examples - one with radio buttons, one with two form fields
These are the same as the example snippets, but with the error messages always visible.
These show how to mark up error messages for a form with a single question - with radio buttons and for a form with multiple questions, a text input and date of birth field.
If there is an error summary, set focus to the summary - otherwise, set focus to the first input (to cover both text input and radios or checkboxes)
Add new .lead-in class for paragraphs above lists
- New darker error colour (awaiting update to front-end toolkit) - Left hand border on error messages - Error messages are indented by 10px for smaller screens and 15px for tablet and up
- Only add spacing under block labels - Remove spacing for the last item
- Add box-sizing to .form-group to prevent content wider than 100% - Make all form labels the same size (19px) - Adjust the spacing for elements in-between form elements - Remove the spacing under .form-hint
|
Gemma - these are excellent. After using these on passports for our last user research session, I'm pleased. The warnings are very clear. Would be good to follow up at some point with validation for inset / conditional questions. |
- Make sure there is 15px between the form question and the input or group of radio buttons - Keep this spacing the same when an error message is shown - Fix indent on legend for IE7 and below
This was causing spacing issues. Move .form-label-bold class to inner span. This gives more consistent styling cross-browser. Also update other examples for consistency.
|
A few questions...
|
| Full name | ||
|
|
||
| <span class="form-hint">As shown on your birth certificate or passport</span> | ||
| <span class="error-message" id="error-full-name">Error message about full name goes here</span> |
There was a problem hiding this comment.
You're linking to the input text error message here, but for the radio button example you've linked to the legend, https://github.com/alphagov/govuk_elements/blob/new-errors-and-validation-guidance-for-review/views/snippets/form_error_radio.html#L31. Is this intentional?
There was a problem hiding this comment.
Hi @gavboulton,
No, that was a mistake.
I've added the missing aria-describedby attributes and the link is now (and should be) to the label, in the same way as the radio button example links to the legend.
There was a problem hiding this comment.
Hi @gemmaleigh,
This is looking really good.
Rather than styling legends, apply the .form-label-bold class to a span wrapping the label legend text.
The aria-describedby attribute should go on the <input>, because it’s the thing being “described” by the additional/error information. Ensure this association exists for both examples.
…b.com:alphagov/govuk_elements into new-errors-and-validation-guidance-for-review
line 14: Opening curly brace `{` should be preceded by one space
line 96: @include declaration should be preceded by an empty line
|
@gemmaleigh When are you expecting this PR to be merged? We are keen to re-use your new errors css in ministryofjustice/defence-request-service. |
|
Hi @robmckinnon, apologies - I've been away. It'll be merged later today. |
|
The descriptive link for an incorrect National Insurance number in the example with multiple error messages doesn't work. The link points at an id (error-ni-number) that either isn't there (only one error is made) or incorrect (error-full-name when there are two errors). |
|
@saproctor thanks for pointing that out, those examples have now been updated. |
|
@saproctor
|
…ce-for-review New errors and validation guidance
This commit is built on top of the work and research that @gemmaleigh did towards alphagov/govuk_elements#71 It changes two main things: - the borders and spacing of validation errors - the nesting of markup to put the error message and hint inside the question's `label` or `legend` It does not address: - The language we use in the validation 'masthead', ie just refering users to which questions have errors, rather than explaining why the error occured (this is a more comprehensive change that would need to happen across all of our apps)
There has been rather a lot of back-and-forth in the previous PR while this was tested further.
This is a new clean branch with the proposed changes to the errors and validation section.
It can be previewed here: https://govuk-elements-test.herokuapp.com/
Our current thinking about validation messages is:
There are two example pages, one which shows how to display errors for a single question - a group of radio buttons and another which shows how to display errors for multiple questions. They have additional implementation advice underneath each example.
In both cases a summary box has been used and the wording is generic, to discourage these examples being copied verbatim. The words used as error messages in the examples show how the messages should differ, however, the exact wording used for error messages is outside the scope of this pull request.