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

Breaking changes to form validation #405

Merged
merged 5 commits into from
Mar 16, 2017
Merged

Breaking changes to form validation #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab32763
Add two new classes for form validation
gemmaleigh Feb 15, 2017
7d5b5c2
Use the new .form-group-error class
gemmaleigh Feb 15, 2017
c2cdcee
Use the new .form-control-error class
gemmaleigh Feb 15, 2017
9ea4a92
Update example pages to use the .form-group-error class
gemmaleigh Feb 15, 2017
a0ac333
Update the date of birth examples
gemmaleigh Feb 15, 2017
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
77 changes: 77 additions & 0 deletions app/views/examples/example_date.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,83 @@ <h1 class="heading-xlarge">
<!-- Date of birth -->
{% include "snippets/form_date.html" %}

{% include "snippets/form_date_show_errors.html" %}

<!-- Date of birth -->
<div class="form-group form-group-error">
<fieldset>
<legend>
<span class="form-label-bold">Date of birth</span>
<span class="form-hint" id="example-dob-hint-1">For example, 31 3 1980</span>
<span class="error-message">Error message goes here</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="example-dob-day-1">Day</label>
<input class="form-control form-control-error" id="example-dob-day-1" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-1">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="example-dob-month-1">Month</label>
<input class="form-control" id="example-dob-month-1" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="example-dob-year-1">Year</label>
<input class="form-control" id="example-dob-year-1" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>

<!-- Date of birth -->
<div class="form-group form-group-error">
<fieldset>
<legend>
<span class="form-label-bold">Date of birth</span>
<span class="form-hint" id="example-dob-hint-2">For example, 31 3 1980</span>
<span class="error-message">Error message goes here</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="example-dob-day-2">Day</label>
<input class="form-control" id="example-dob-day-2" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-2">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="example-dob-month-2">Month</label>
<input class="form-control form-control-error" id="example-dob-month-2" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="example-dob-year-2">Year</label>
<input class="form-control" id="example-dob-year-2" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>

<!-- Date of birth -->
<div class="form-group form-group-error">
<fieldset>
<legend>
<span class="form-label-bold">Date of birth</span>
<span class="form-hint" id="example-dob-hint-3">For example, 31 3 1980</span>
<span class="error-message">Error message goes here</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="example-dob-day-3">Day</label>
<input class="form-control" id="example-dob-day-3" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-3">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="example-dob-month-3">Month</label>
<input class="form-control" id="example-dob-month-3" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="example-dob-year-3">Year</label>
<input class="form-control form-control-error" id="example-dob-year-3" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>

</div>
</div>

Expand Down
113 changes: 82 additions & 31 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 @@ -124,7 +124,7 @@ <h2 class="heading-medium">
</p>

<!-- Text inside a label - error -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="example-form-control">
This is the label text
<span class="form-hint">
Expand All @@ -134,11 +134,11 @@ <h2 class="heading-medium">
Error message goes here
</span>
</label>
<input class="form-control" id="example-form-control" type="text">
<input class="form-control form-control-error" id="example-form-control" type="text">
</div>

<!-- Hint text outside a label (preference is inside, to be read by AT) - error -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="example-form-control">
This is the label text
</label>
Expand All @@ -148,11 +148,11 @@ <h2 class="heading-medium">
<span class="error-message">
Error message goes here
</span>
<input class="form-control" id="example-form-control" type="text">
<input class="form-control form-control-error" id="example-form-control" type="text">
</div>

<!-- Text inside a legend - error -->
<div class="form-group error">
<div class="form-group form-group-error">
<fieldset>

<legend>
Expand All @@ -174,29 +174,80 @@ <h2 class="heading-medium">
</div>

<!-- Date of birth -->
<div class="form-group error">
<div class="form-group form-group-error">
<fieldset>
<legend>
<span class="form-label-bold">Date of birth</span>
<span class="form-hint" id="example-dob-hint">For example, 31 3 1980</span>
<span class="form-hint" id="example-dob-hint-1">For example, 31 3 1980</span>
<span class="error-message">Error message goes here</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="example-dob-day">Day</label>
<input class="form-control" id="example-dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint">
<label class="form-label" for="example-dob-day-1">Day</label>
<input class="form-control form-control-error" id="example-dob-day-1" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-1">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="example-dob-month">Month</label>
<input class="form-control" id="example-dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
<label class="form-label" for="example-dob-month-1">Month</label>
<input class="form-control" id="example-dob-month-1" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="example-dob-year">Year</label>
<input class="form-control" id="example-dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
<label class="form-label" for="example-dob-year-1">Year</label>
<input class="form-control" id="example-dob-year-1" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>

<!-- Date of birth -->
<div class="form-group form-group-error">
<fieldset>
<legend>
<span class="form-label-bold">Date of birth</span>
<span class="form-hint" id="example-dob-hint-2">For example, 31 3 1980</span>
<span class="error-message">Error message goes here</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="example-dob-day-2">Day</label>
<input class="form-control" id="example-dob-day-2" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-2">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="example-dob-month-2">Month</label>
<input class="form-control form-control-error" id="example-dob-month-2" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="example-dob-year-2">Year</label>
<input class="form-control" id="example-dob-year-2" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>

<!-- Date of birth -->
<div class="form-group form-group-error">
<fieldset>
<legend>
<span class="form-label-bold">Date of birth</span>
<span class="form-hint" id="example-dob-hint-3">For example, 31 3 1980</span>
<span class="error-message">Error message goes here</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="example-dob-day-3">Day</label>
<input class="form-control" id="example-dob-day-3" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="example-dob-hint-3">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="example-dob-month-3">Month</label>
<input class="form-control" id="example-dob-month-3" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="example-dob-year-3">Year</label>
<input class="form-control form-control-error" id="example-dob-year-3" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>

</div>

<div class="form-section">
Expand Down Expand Up @@ -269,14 +320,14 @@ <h2 class="heading-medium">
</div>

<!-- Input type="text" - error -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label" for="input-text-b">
This is the label text
<span class="error-message">
Error message goes here
</span>
</label>
<input class="form-control" id="input-text-b" type="text">
<input class="form-control form-control-error" id="input-text-b" type="text">
</div>

<!-- Input type="text" (bold label) -->
Expand All @@ -288,14 +339,14 @@ <h2 class="heading-medium">
</div>

<!-- Input type="text" - error (bold label) -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="input-text-d">
This is the label text in bold
<span class="error-message">
Error message goes here
</span>
</label>
<input class="form-control" id="input-text-d" type="text">
<input class="form-control form-control-error" id="input-text-d" type="text">
</div>

<!-- Input type="text" (bold label with hint text) -->
Expand All @@ -320,7 +371,7 @@ <h2 class="heading-medium">
</div>

<!-- Input type="text" - error (bold label with hint text) -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="input-text-h">
This is the label text
<span class="form-hint">
Expand All @@ -330,7 +381,7 @@ <h2 class="heading-medium">
Error message goes here
</span>
</label>
<input class="form-control" id="input-text-h" type="text">
<input class="form-control form-control-error" id="input-text-h" type="text">
</div>
</div>

Expand All @@ -352,14 +403,14 @@ <h2 class="heading-medium">
</div>

<!-- Textarea - error -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label" for="textarea-b">
This is the label text
<span class="error-message">
Error message goes here
</span>
</label>
<textarea class="form-control" id="textarea-b" cols="30" rows="10"></textarea>
<textarea class="form-control form-control-error" id="textarea-b" cols="30" rows="10"></textarea>
</div>

<!-- Textarea (bold label) -->
Expand All @@ -371,14 +422,14 @@ <h2 class="heading-medium">
</div>

<!-- Textarea - error (bold label) -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="textarea-d">
This is the label text in bold
<span class="error-message">
Error message goes here
</span>
</label>
<textarea class="form-control" id="textarea-d" cols="30" rows="10"></textarea>
<textarea class="form-control form-control-error" id="textarea-d" cols="30" rows="10"></textarea>
</div>

<!-- Textarea (bold label, with hint text) -->
Expand All @@ -391,15 +442,15 @@ <h2 class="heading-medium">
</div>

<!-- Textarea - error (bold label, with hint text) -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="textarea-f">
This is the label text
<span class="form-hint">This is hint text</span>
<span class="error-message">
Error message goes here
</span>
</label>
<textarea class="form-control" id="textarea-f" cols="30" rows="10"></textarea>
<textarea class="form-control form-control-error" id="textarea-f" cols="30" rows="10"></textarea>
</div>
</div>

Expand All @@ -419,14 +470,14 @@ <h2 class="heading-medium">
</div>

<!-- Select box - error -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label" for="select-box-b">
This is the label text
<span class="error-message">
Error message goes here
</span>
</label>
<select class="form-control" id="select-box-b">
<select class="form-control form-control-error" id="select-box-b">
<option>GOV.UK elements option 1</option>
<option>GOV.UK elements option 2</option>
<option>GOV.UK elements option 3</option>
Expand All @@ -448,14 +499,14 @@ <h2 class="heading-medium">
</div>

<!-- Select box - error (with bold text) -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="select-box-d">
This is the label text
<span class="error-message">
Error message goes here
</span>
</label>
<select class="form-control" id="select-box-d">
<select class="form-control form-control-error" id="select-box-d">
<option>GOV.UK elements option 1</option>
<option>GOV.UK elements option 2</option>
<option>GOV.UK elements option 3</option>
Expand All @@ -480,7 +531,7 @@ <h2 class="heading-medium">
</div>

<!-- Select box - error (with bold text and hint text) -->
<div class="form-group error">
<div class="form-group form-group-error">
<label class="form-label-bold" for="select-box-h">
This is the label text
<span class="form-hint">
Expand All @@ -490,7 +541,7 @@ <h2 class="heading-medium">
Error message goes here
</span>
</label>
<select class="form-control" id="select-box-h">
<select class="form-control form-control-error" id="select-box-h">
<option>GOV.UK elements option 1</option>
<option>GOV.UK elements option 2</option>
<option>GOV.UK elements option 3</option>
Expand Down
27 changes: 27 additions & 0 deletions app/views/snippets/form_date_show_errors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<form>
<div class="form-group form-group-error">
<fieldset>
<legend>
<span class="form-label-bold">
What is your date of birth?
</span>
<span class="form-hint" id="dob-hint-example">For example, 31 3 1980</span>
<span class="error-message">Error message goes here</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="dob-day-example">Day</label>
<input class="form-control form-control-error" id="dob-day-example" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31" aria-describedby="dob-hint-example">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="dob-month-example">Month</label>
<input class="form-control form-control-error" id="dob-month-example" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="dob-year-example">Year</label>
<input class="form-control form-control-error" id="dob-year-example" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>
</form>
Loading