Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form validation patterns for conditionally revealing content #286

Merged
merged 3 commits into from
Aug 23, 2016
Merged

Form validation patterns for conditionally revealing content #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b264f3
Reduce nesting for form validation
gemmaleigh Aug 18, 2016
9c8d158
Fix child elements inheriting a red border
gemmaleigh Aug 18, 2016
8b881af
Add two examples to show nested errors
gemmaleigh Aug 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/views/examples/example_form_elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -539,6 +539,11 @@ <h3 class="heading-medium">
{% include "snippets/form_inset_radios.html" %}
</div>

<div class="form-section">
<!-- Radio buttons (select one option to reveal content) with error -->
{% include "snippets/form_inset_radios_show_errors.html" %}
</div>

<div class="form-section">
<!-- Checkboxes (select more than option to reveal content) -->
{% include "snippets/form_inset_checkboxes.html" %}
Expand Down
96 changes: 96 additions & 0 deletions app/views/snippets/form_inset_radios_show_errors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<h1 class="heading-medium" id="example-conditional-errors">
Your income
</h1>

<form>
<div class="form-group error">

<fieldset>

<legend>
<span class="form-label-bold">How often do you get paid?</span>
<span class="error-message">Choose an answer</span>
</legend>

<label class="block-label" data-target="paid-weekly" for="example-paid-weekly">
<input type="radio" name="radio-income-group" value="Yes" id="example-paid-weekly">
Weekly
</label>
<div class="panel panel-border-narrow js-hidden" id="paid-weekly">
<label class="form-label" for="example-paid-weekly-pay">Weekly take home pay after tax</label>
<input class="form-control" name="example-paid-weekly-pay" type="text" id="example-paid-weekly-pay">
</div>

<label class="block-label" data-target="paid-fortnightly" for="example-paid-fortnightly">
<input type="radio" name="radio-income-group" value="Yes" id="example-paid-fortnightly">
Fortnightly
</label>
<div class="panel panel-border-narrow js-hidden" id="paid-fortnightly">
<label class="form-label" for="example-paid-fortnightly-pay">Weekly take home pay after tax</label>
<input class="form-control" name="example-paid-fortnightly-pay" type="text" id="example-paid-fortnightly-pay">
</div>

<label class="block-label" data-target="paid-monthly" for="example-paid-monthly">
<input type="radio" name="radio-income-group" value="Yes" id="example-paid-monthly">
Monthly
</label>
<div class="panel panel-border-narrow js-hidden" id="paid-monthly">
<label class="form-label" for="example-paid-monthly-pay">Monthly take home pay after tax</label>
<input class="form-control" name="example-paid-monthly-pay" type="text" id="example-paid-monthly-pay">
</div>

</fieldset>
</div>
</form>

<h1 class="heading-medium" id="example-conditional-errors-2">
Your income
</h1>

<form>
<div class="form-group">

<fieldset>

<legend>
<span class="form-label-bold">How often do you get paid?</span>
</legend>

<label class="block-label" data-target="paid-weekly-2" for="example-paid-weekly-2">
<input type="radio" name="radio-income-group-2" value="Yes" id="example-paid-weekly-2">
Weekly
</label>
<div class="panel panel-border-narrow js-hidden" id="paid-weekly-2">
<label class="form-label" for="example-paid-weekly-pay-2">Weekly take home pay after tax</label>
<input class="form-control" name="example-paid-weekly-pay-2" type="text" id="example-paid-weekly-pay-2">
</div>

<label class="block-label" data-target="paid-fortnightly-2" for="example-paid-fortnightly-2">
<input type="radio" name="radio-income-group-2" value="Yes" id="example-paid-fortnightly-2">
Fortnightly
</label>
<div class="panel panel-border-narrow js-hidden" id="paid-fortnightly-2">
<label class="form-label" for="example-paid-fortnightly-pay-2">Weekly take home pay after tax</label>
<input class="form-control" name="example-paid-fortnightly-pay-2" type="text" id="example-paid-fortnightly-pay-2">
</div>

<label class="block-label" data-target="paid-monthly-2" for="example-paid-monthly-2">
<input type="radio" name="radio-income-group-2" value="Yes" id="example-paid-monthly-2" checked="checked">
Monthly
</label>
<div class="panel panel-border-narrow panel-with-error" id="paid-monthly-2">
<div class="form-group error">
<label class="form-label" for="example-paid-monthly-pay-2">
Monthly take home pay (after tax)?
<span class="error-message">
Error message about monthly pay goes here
</span>
</label>
<input class="form-control" name="example-paid-monthly-pay-2" type="text" id="example-paid-monthly-pay-2">
</div>
</div>

</fieldset>
</div>
</form>

25 changes: 9 additions & 16 deletions public/sass/elements/forms/_form-validation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,34 @@
// Form validation
// ==========================================================================

// Using the classname .error as it's shorter than .validation and easier to type!
// Use error to add a red border to the left of a .form-group
.error {

// Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
// Ensure the .error class is applied to .form-group, otherwise box-sizing(border-box) will need to be used
// @include box-sizing(border-box);
margin-right: 15px;

// Error messages should be red and bold
.error-message {
color: $error-colour;
font-weight: bold;
}

// Form inputs should have a red border
.form-control {
// Add a red border to .form-controls that are direct descendants
> .form-control {
border: 4px solid $error-colour;
}

}

.error,
.error-summary {

// Add a red border to the left of the field
border-left: 4px solid $error-colour;
padding-left: 10px;

@include media(tablet) {
border-left: 5px solid $error-colour;
padding-left: $gutter-half;
}

}

// Error messages should be red and bold
.error-message {
@include core-19;
@include bold-19;
color: $error-colour;


display: block;
clear: both;
Expand Down