From 1b264f3bf6c979f52003dee6e9b1121b252b49aa Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Thu, 18 Aug 2016 10:36:36 +0100 Subject: [PATCH 1/3] Reduce nesting for form validation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../sass/elements/forms/_form-validation.scss | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/public/sass/elements/forms/_form-validation.scss b/public/sass/elements/forms/_form-validation.scss index d45a1ffd4..e9dd8befb 100644 --- a/public/sass/elements/forms/_form-validation.scss +++ b/public/sass/elements/forms/_form-validation.scss @@ -1,30 +1,18 @@ // 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 { 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; @@ -32,10 +20,14 @@ 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; From 9c8d158b7ae2790f7666525a12103635f82812c7 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Thu, 18 Aug 2016 10:41:27 +0100 Subject: [PATCH 2/3] Fix child elements inheriting a red border 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. --- public/sass/elements/forms/_form-validation.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/sass/elements/forms/_form-validation.scss b/public/sass/elements/forms/_form-validation.scss index e9dd8befb..ae1c9ea8a 100644 --- a/public/sass/elements/forms/_form-validation.scss +++ b/public/sass/elements/forms/_form-validation.scss @@ -9,7 +9,8 @@ margin-right: 15px; // 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; } From 8b881afe57535871be8c3fed400446eb1d7001ed Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Thu, 18 Aug 2016 10:42:17 +0100 Subject: [PATCH 3/3] Add two examples to show nested errors --- app/views/examples/example_form_elements.html | 5 + .../form_inset_radios_show_errors.html | 96 +++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 app/views/snippets/form_inset_radios_show_errors.html diff --git a/app/views/examples/example_form_elements.html b/app/views/examples/example_form_elements.html index fb27c4ffd..94b3bedca 100644 --- a/app/views/examples/example_form_elements.html +++ b/app/views/examples/example_form_elements.html @@ -539,6 +539,11 @@

{% include "snippets/form_inset_radios.html" %} +
+ + {% include "snippets/form_inset_radios_show_errors.html" %} +
+
{% include "snippets/form_inset_checkboxes.html" %} diff --git a/app/views/snippets/form_inset_radios_show_errors.html b/app/views/snippets/form_inset_radios_show_errors.html new file mode 100644 index 000000000..e128a162c --- /dev/null +++ b/app/views/snippets/form_inset_radios_show_errors.html @@ -0,0 +1,96 @@ +

+ Your income +

+ +
+
+ +
+ + + How often do you get paid? + Choose an answer + + + + + + + + + + + +
+
+
+ +

+ Your income +

+ +
+
+ +
+ + + How often do you get paid? + + + + + + + + + + + +
+
+
+