Events and Forms

Submit Validation

A form handler prevents navigation, reads an email field, and renders either an error or success message.

Program

Client validation often starts in a submit event. preventDefault keeps the page in place while JavaScript displays feedback.

submit_validation.html
Visuals: captured from real browser rendering
<form id="signup"><input name="email" value="reader"><button>Join</button></form>
<p id="message">Waiting</p>
<script>
  const form = document.querySelector("#signup");
  const message = document.querySelector("#message");
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const ok = form.email.value.includes("@");
    message.textContent = ok ? "Subscribed" : "Enter an email address";
  });
</script>

  1. Register the submit handler.

    The form is visible and waiting.
    The handler will run when the form submits.

  2. Keep the browser on this page.

    The page stays in place after submit.
    preventDefault stops the normal form navigation.

  3. Check whether the value looks like email.

    The message is ready to show an error.
    The first value does not include @.

  4. Render the validation error.

    The error message appears below the form.
    The submit handler writes feedback into the DOM.
submit event The submit event fires when a form is submitted.
preventDefault preventDefault cancels the browser default action for an event.