HTML onsubmit Attribute

Introduction

The onsubmit attribute is an inline event handler for the submit event on a <form> element. It runs when the user tries to send the form — by clicking a Submit button, pressing Enter in a text field, or when script calls form.requestSubmit(). Use it to validate data, show errors, or handle submission with JavaScript instead of a full page reload. Return false (inline) or call event.preventDefault() (listener) to cancel submission. Prefer addEventListener("submit", …) in production.

What You’ll Learn

Purpose of onsubmit Attribute

The primary purpose of onsubmit is to run custom logic before the browser sends form data to the server (or navigates to the action URL). Validate fields, show friendly error messages, transform values, or intercept submission for a single-page app with fetch.

If the handler returns false (inline attribute) or calls event.preventDefault(), the form does not submit and the page does not navigate. If it returns true or does nothing blocking, the browser continues with normal submission.

📝 Syntax

Set onsubmit on <form>, or assign form.onsubmit in JavaScript:

<form action="/login" method="post" onsubmit="return validateForm()">
  <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>

<script>
  form.onsubmit = validateForm;
  form.addEventListener("submit", function (event) {
    if (!isValid()) event.preventDefault();
  });
</script>

Syntax Rules

• Valid on <form> elements only.
• Value is JavaScript executed when the submit event fires.
• Inline: return false cancels submission; return true allows it.
• Listener: use event.preventDefault() to cancel.
• Triggered by Submit button, button type="submit", Enter in a text field, or requestSubmit().
• Also assignable as form.onsubmit in script.
• Modern alternative: addEventListener("submit", handler).

💎 Values

The onsubmit attribute accepts a string of JavaScript code:

• onsubmit="return validateForm()" — Call a function; return value controls submission.
• onsubmit="return false" — Always block submission (demo pages).
• onsubmit="event.preventDefault(); handleSubmit()" — Cancel then run custom logic.
• JavaScript: form.onsubmit = () => { …; return false; } — property assignment.

function validateForm() {
  var username = document.getElementById("username").value.trim();
  var password = document.getElementById("password").value.trim();

  if (username === "" || password === "") {
    status.textContent = "Please fill in all fields";
    status.setAttribute("role", "alert");
    return false; // block submission
  }

  status.textContent = "Validated — sending…";
  return true; // allow submission
}

form.addEventListener("submit", function (event) {
  if (!isValid()) event.preventDefault();
});

Applicable Elements

onsubmit vs onreset vs native validation vs form.submit()

Examples Gallery

Login validation with return false, dynamic assignment, and addEventListener with preventDefault.

<form onsubmit="return validateForm()">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <input type="submit" value="Submit">
</form>

<script>
  function validateForm() {
    if (username.value === "" || password.value === "") {
      status.textContent = "Please fill in all fields";
      return false;
    }
    return true;
  }
</script>

<script>
  document.getElementById("dynamicForm").onsubmit = function () {
    log.textContent = "Form submitted dynamically";
    return false;
  };
</script>

form.addEventListener("submit", function (event) {
  event.preventDefault();

  var email = emailInput.value.trim();
  status.textContent = "Thanks! We saved: " + email;
  // Later: fetch("/subscribe", { method: "POST", body: … })
});

♿ Accessibility

• Announce errors — Use role="alert" or aria-live="polite" on validation messages.
• Link errors to fields — Use aria-describedby and aria-invalid="true" on invalid inputs.
• Do not rely on color alone — Pair red borders with clear text like “Password is required.”
• Keyboard submit — Enter in a text field submits the form — ensure your handler works for keyboard users too.
• Avoid alert() — Blocking dialogs are disruptive; use inline status text instead.

💡 Best Practices