diff --git a/assets/src/styles/blocks/ENForm/components/_enform-full-width.scss b/assets/src/styles/blocks/ENForm/components/_enform-full-width.scss index 2bde9f044..7f76354b0 100644 --- 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 index 7e6401388..3cbc09c66 100644 --- 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 index 4f11a9405..10011c091 100644 --- 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 = $('
'); $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 index f3bbe512a..71414cb27 100644 --- a/templates/blocks/enform/enform_post.twig +++ b/templates/blocks/enform/enform_post.twig @@ -78,7 +78,7 @@ /> {{ question_option.option_label|e('wp_kses_post')|raw }} -
+
@@ -133,7 +133,7 @@ /> {{ radio_option.option_label|e('wp_kses_post')|raw }} -
+