Submit Validation - JavaScript Client

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

<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>

submit event The submit event fires when a form is submitted.

preventDefault preventDefault cancels the browser default action for an event.