na

app/javascript/application.js

@@ -42,20 +42,22 @@ function validateFormInput(event) {
   const form       = document.getElementById('questionForm');
   const submitBtn  = document.getElementById('questionSubmitButton');
 
-  form.addEventListener('submit', e => {
-    // If no radio in the group is checked…
-    if (!form.querySelector('input[type=radio]:checked')) {
-      e.preventDefault();                // stop the form from submitting
-      submitBtn.classList.remove('wiggle'); // reset so the animation can retrigger
-      void submitBtn.offsetWidth;           // force reflow (quick trick)
-      submitBtn.classList.add('wiggle');    // start the wiggle
-    }
-  });
+  if (form) {
+    form.addEventListener('submit', e => {
+      // If no radio in the group is checked…
+      if (!form.querySelector('input[type=radio]:checked')) {
+        e.preventDefault();                // stop the form from submitting
+        submitBtn.classList.remove('wiggle'); // reset so the animation can retrigger
+        void submitBtn.offsetWidth;           // force reflow (quick trick)
+        submitBtn.classList.add('wiggle');    // start the wiggle
+      }
+    });
 
-  // Tidy up the class once the animation ends
-  submitBtn.addEventListener('animationend', () => {
-    submitBtn.classList.remove('wiggle');
-  });
+    // Tidy up the class once the animation ends
+    submitBtn.addEventListener('animationend', () => {
+      submitBtn.classList.remove('wiggle');
+    });
+  }
 }
   
 

app/views/players/new.html.erb

@@ -31,7 +31,7 @@
     
     <div class="animation-element">
       <%= form.button tag.span(t('submit')), 
-                      class: 'button__base'  %>
+                      class: form.object.errors.any? ? 'button__base wiggle' : 'button__base'  %>
     </div>
   
   </div>