fix: Questionnaire agreement read and accept error placement (#525)

Co-authored-by: Chris Baudouin, Jr <[email protected]>

Author: JeremyRudman

app/assets/javascripts/validate.js

@@ -18,8 +18,8 @@ document.addEventListener('turbolinks:load', function() {
         switch (types[i]) {
           case 'presence':
             if (!value || $.trim(value).length < 1) {
-              if ($(this).parents('.agreement_input')) {
-                notify('.agreement_input', 'Please read & accept');
+            if ($(this).hasClass("agreement_input")) {
+                notify($(this).parent(), 'Please read & accept');
               } else {
                 notify(this, 'Missing Information');
               }
@@ -74,7 +74,9 @@ document.addEventListener('turbolinks:load', function() {
           .fadeOut(200, function() {
             $(this).remove();
           });
-        $(".agreement_input")
+        // this removes the notification for agreements
+        $(this)
+          .parent()
           .parent()
           .removeClass('field_with_errors')
           .find('.error')

app/assets/stylesheets/forms/_forms.sass

@@ -73,6 +73,8 @@ hr
   @include css4
     color: var(--grey)
   .error
+    display: inline-block
+    width: 100%
     @include css4
       background: var(--input--error--background)
       color: var(--input--error--text)

app/views/questionnaires/_form.html.haml

@@ -52,8 +52,7 @@
         %strong Agreements
         %p Please review the agreements and click the corresponding checkbox next to each agreement to agree.
         .form-inputs
-          .agreement_input
-            = f.association :agreements, as: :check_boxes, label_method: :formatted_agreement, value_method: :id, label: "", wrapper_html: { style: 'display: block' }, input_html: { "data-validate" => "presence" }
+          = f.association :agreements, as: :check_boxes, label_method: :formatted_agreement, value_method: :id, label: "", wrapper_html: { style: 'display: block' }, input_html: { "data-validate" => "presence", class: "agreement_input"}
 
       .right
         %button.button{ type: "button", "data-wizard" => "previous" } Previous