Merge pull request #520 from greenpeace/planet-5984

PLANET-5984 Checkbox/radio validation issues in EN forms
greenpeace · Mar 31, 2021 · 588ebe3 · 588ebe3
2 parents d5d4ca3 + 621a4c5
commit 588ebe3
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 47 deletions.
diff --git a/assets/src/styles/blocks/ENForm/components/_enform-full-width.scss b/assets/src/styles/blocks/ENForm/components/_enform-full-width.scss
@@ -15,6 +15,14 @@
     }
 
     form {
+      .custom-control .custom-control-description {
+        color: $white;
+
+        a {
+          color: $white;
+        }
+      }
+
       .en__field--check {
         margin-top: 16px;
 

diff --git a/assets/src/styles/blocks/ENForm/components/_enform.scss b/assets/src/styles/blocks/ENForm/components/_enform.scss
@@ -99,46 +99,6 @@
       @include  large-and-up {
         width: 100% !important;
       }
-
-      &.is-invalid {
-        border-color: $dark-orange;
-        background: $white;
-
-        &:focus {
-          border-color: $dark-orange;
-        }
-      }
-
-      + .invalid-feedback {
-        background: $dark-orange;
-        color: white;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: 500;
-        padding: 6px 12px;
-        width: fit-content;
-        position: relative;
-        pointer-events: none;
-        margin-top: 6px;
-
-        &:after {
-          bottom: 100%;
-          border: solid transparent;
-          content: "";
-          height: 0;
-          width: 0;
-          position: absolute;
-          border-bottom-color: $dark-orange;
-          border-width: 5px;
-          right: auto;
-          left: 16px;
-
-          html[dir="rtl"] & {
-            left: auto;
-            right: 16px;
-          }
-        }
-      }
     }
 
     .disable-checkbox {

diff --git a/public/js/enform_submit.js b/public/js/enform_submit.js
@@ -57,6 +57,12 @@ const p4_enform_frontend = (function ($) {
     return re.test(String(email).toLowerCase());
   };
 
+  enform.validateRadio = radio => {
+    const name = radio.attr('name');
+    const siblingRadios = [...$(`input[type="radio"][name ="${name}"]`)];
+    return siblingRadios.find(radio => radio.checked === true);
+  };
+
   enform.validateUrl = function(url) {
     return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);  //eslint-disable-line no-useless-escape
   };
@@ -65,19 +71,29 @@ const p4_enform_frontend = (function ($) {
     if ('undefined' === typeof msg) {
       msg = $(element).data('errormessage');
     }
-    $(element).addClass('is-invalid');
     const $invalidDiv = $('<div>');
     $invalidDiv.addClass('invalid-feedback');
     $invalidDiv.html(msg);
-    $invalidDiv.insertAfter(element);
+    $(element).addClass('is-invalid');
+    // For checkboxes and radios we need to append the error message to the description
+    if (['checkbox', 'radio'].includes($(element).attr('type'))) {
+      const description = $(element).next();
+      $invalidDiv.insertAfter(description);
+    } else {
+      $invalidDiv.insertAfter(element);
+    }
   };
 
   enform.removeErrorMessage = function(element) {
     $(element).removeClass('is-invalid');
-    const errorDiv = $(element).next();
+    let errorDiv = $(element).next();
+    if (['checkbox', 'radio'].includes($(element).attr('type'))) {
+      errorDiv = errorDiv.next();
+    }
     if (errorDiv.length && errorDiv.hasClass('invalid-feedback')) {
       $(errorDiv).remove();
     }
+
   };
 
   enform.validateForm = function(form) {
@@ -87,8 +103,10 @@ const p4_enform_frontend = (function ($) {
       enform.removeErrorMessage(this);
       const formValue = $(this).val();
 
-      if (
-        $(this).attr('required') && !formValue ||
+      if ( // We only need to validate once per set of radios so we can check only the first one
+        $(this).attr('required') && 'radio' === $(this).attr('type') && $(this).attr('id').slice(-1) === '0' && !enform.validateRadio($(this)) ||
+        $(this).attr('required') && 'checkbox' === $(this).attr('type') && !$(this)[0].checked ||
+        $(this).attr('required') && !formValue && 'radio' !== $(this).attr('type') ||
         'email' === $(this).attr('type') && !enform.validateEmail(formValue)
       ) {
         enform.addErrorMessage(this);

diff --git a/templates/blocks/enform/enform_post.twig b/templates/blocks/enform/enform_post.twig
@@ -78,7 +78,7 @@
 											/>
 											<span class="custom-control-description">
 												{{ question_option.option_label|e('wp_kses_post')|raw }}
-											</span><br />
+											</span>
 										</label>
 									</div>
 								</div>
@@ -133,7 +133,7 @@
 										/>
 										<span class="custom-control-description">
 											{{ radio_option.option_label|e('wp_kses_post')|raw }}
-										</span><br />
+										</span>
 									</label>
 								</div>
 							</div>