Dynamically disable invalid form submit buttons

When an invalid event fires, set all of element’s related <form> submit buttons to [disabled]. In this case, a “submit” button is an <input type="submit">, a <button type="submit">, or a <button> element that does not declare a [type] attribute.

When the blur event fires for a valid field, update the <form> element’s submit buttons based on whether or not all of the <form> s fields are valid. In this case, a form is “valid” if every element’s ValidityState.valid == true. This property is dynamically updated by the browser outside of the checkValidity() and reportValidity() interface updating methods.

Similarly, when an input event fires, update the <form> element’s submit buttons based on its “validity”.


      app/javascript/initializers/validations.ts

diff --git a/app/javascript/initializers/validations.ts b/app/javascript/initializers/validations.ts
index 48ff64e..94ea449 100644
--- a/app/javascript/initializers/validations.ts
+++ b/app/javascript/initializers/validations.ts
@@ -6,6 +6,8 @@ type FieldElement =
   HTMLSelectElement |
   HTMLTextAreaElement
 
+type SubmitElement = HTMLButtonElement | HTMLInputElement
+
 addEventListener("invalid", (event) => {
   if (isFieldElement(event.target)) {
     reportValidity(event.target)
@@ -23,9 +25,17 @@ addEventListener("focusout", ({ target }) => {
   }
 })
 
+addEventListener("input", ({ target }) => {
+  if (isFieldElement(target)) {
+    disableSubmit(target.form)
+  }
+})
+
 function clearValidity(input: FieldElement): void {
   input.setCustomValidity("")
 
+  if (input.form) disableSubmit(input.form)
+
   reportValidity(input)
 }
 
@@ -51,9 +61,19 @@ function reportValidity(input: FieldElement): void {
     if (!element.parentElement) {
       input.parentElement.append(element)
     }
+
+    if (input.form) disableSubmit(input.form)
   }
 }
 
+function disableSubmit(form: HTMLFormElement): void {
+  const submitButtons = Array.from(form.querySelectorAll('[type="submit"], button:not([type])')).filter(isSubmitElement)
+  const fields = Array.from(form.elements).filter(isFieldElement)
+  const isValid = fields.every(input => input.validity.valid)
+
+  for (const submitButton of submitButtons) submitButton.disabled = !isValid
+}
+
 function createValidationMessageFragment(form) {
   if (form) {
     const template = form.querySelector("[data-validation-message-template]")
@@ -88,3 +108,7 @@ function isFieldElement(element: any): element is FieldElement {
     HTMLTextAreaElement,
   ].some(field => element instanceof field)
 }
+
+function isSubmitElement(element: any): element is SubmitElement {
+  return [ HTMLButtonElement, HTMLInputElement ].some(field => element instanceof field)
+}


      test/system/authentications_test.rb

diff --git a/test/system/authentications_test.rb b/test/system/authentications_test.rb
index a6ff627..bdbe707 100644
--- a/test/system/authentications_test.rb
+++ b/test/system/authentications_test.rb
@@ -1,10 +1,21 @@
 require "application_system_test_case"
 
 class AuthenticationsTest < ApplicationSystemTestCase
+  test "valid authentication enables the submit button" do
+    alice = users(:alice)
+
+    visit new_authentication_path
+    fill_in label(:authentication, :username), with: alice.username
+    fill_in label(:authentication, :password), with: "password"
+
+    assert_button submit(:authentication), disabled: false
+  end
+
   test "invalid authentication renders errors" do
     visit new_authentication_path
     click_on submit(:authentication)
 
+    assert_button submit(:authentication), disabled: true
     assert_field label(:authentication, :username), validation_error: "can't be blank"
     assert_field label(:authentication, :password), validation_error: "can't be blank"
   end
@@ -15,6 +26,7 @@ class AuthenticationsTest < ApplicationSystemTestCase
     fill_in label(:authentication, :username), with: "junk"
     fill_in label(:authentication, :password), with: ""
 
+    assert_button submit(:authentication), disabled: true
     assert_field label(:authentication, :username), valid: true
     assert_field label(:authentication, :password), validation_error: "can't be blank"
     assert_no_field label(:authentication, :username), validation_error: "can't be blank"
@@ -23,8 +35,9 @@ class AuthenticationsTest < ApplicationSystemTestCase
   test "invalid authentication falls back to in-Browser validation messages" do
     visit new_authentication_path
     fill_in label(:authentication, :password), with: "junk"
-    click_on submit(:authentication)
+    fill_in label(:authentication, :username), with: ""
 
+    assert_button submit(:authentication), disabled: true
     assert_field label(:authentication, :password), validation_error: "Please lengthen this text to 7 characters or more (you are currently using 4 characters)."
   end
 end