diff --git a/app/javascript/application.js b/app/javascript/application.js index 0440695..94fe2f7 100644 --- a/app/javascript/application.js +++ b/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'); + }); + } } diff --git a/app/views/players/new.html.erb b/app/views/players/new.html.erb index 7a166a8..22d0343 100644 --- a/app/views/players/new.html.erb +++ b/app/views/players/new.html.erb @@ -31,7 +31,7 @@
<%= form.button tag.span(t('submit')), - class: 'button__base' %> + class: form.object.errors.any? ? 'button__base wiggle' : 'button__base' %>