Enable or Disable a Form Submit Button with JavaScript

A submit button can stay disabled until the required form conditions are satisfied. Recheck those conditions every time the user changes relevant fields, because a form that was valid can become invalid again.

const submitButton = document.getElementById("btnSignUp");
submitButton.disabled = !isFormValid();

Start with Accessible Form Controls Top ↑

The original example required a name, gender selection, game selection, and agreement checkbox. The same teaching case is retained:

<form id="signupForm">
  <input id="t1" name="FirstName" required>
  <select id="s1" name="games" required>...</select>
  <input type="checkbox" id="c1" required>
  <button type="submit" id="btnSignUp" disabled>Sign Up</button>
</form>

Write One Validation Function Top ↑

function isFormValid() {
  const nameOk = document.getElementById("t1").value.trim().length >= 3;
  const genderOk = document.querySelector('input[name="gender"]:checked') !== null;
  const gameOk = document.getElementById("s1").value !== "";
  const agreed = document.getElementById("c1").checked;

  return nameOk && genderOk && gameOk && agreed;
}

Recheck Whenever Relevant Input Changes Top ↑

Instead of assigning several old-style onclick/onkeyup properties from window.onload, listen for input and change events on the form.

const form = document.getElementById("signupForm");
const submitButton = document.getElementById("btnSignUp");

function updateSubmitState() {
  submitButton.disabled = !isFormValid();
}

form.addEventListener("input", updateSubmitState);
form.addEventListener("change", updateSubmitState);

The controls can still be accessed individually with getElementById() when that is the clearest option.

Validate Again on Submit Top ↑

Disabling the button improves the interface, but it must not be the only validation gate. A script can enable controls, trigger submission programmatically, or be bypassed. Check the state again in the submit handler.

form.addEventListener("submit", (event) => {
  if (!isFormValid()) {
    event.preventDefault();
    message.textContent = "Complete all required fields.";
  }
});

Restore the Disabled State After Reset Top ↑

form.addEventListener("reset", () => {
  submitButton.disabled = true;
});

See the separate JavaScript form reset tutorial for how reset() restores default values.

Use Native HTML Validation Where It Fits Top ↑

Attributes such as required, minlength, type="email", min, max, and pattern can handle many common constraints without custom JavaScript. JavaScript can then add interface behavior instead of recreating every browser validation feature.

Client-Side Validation Is Not Server Validation Top ↑

Client-side checks improve feedback and reduce avoidable submissions, but the server must validate submitted data independently. Never trust the browser as the final authority for security, database writes, authorization, or business rules.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: