Validating a Form Client-Side

Add lightweight client-side validation as a courtesy layer in front of the server-side validation your PHP endpoint should always perform too.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<form id="demo-form">
  <label for="email">Email</label>
  <input id="email" type="email" required>
  <button type="submit">Submit</button>
</form>
<p id="msg"></p>

#msg { color: #a12c7b; }

const form = document.getElementById("demo-form");
const msg = document.getElementById("msg");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  msg.textContent = "Looks valid on the client — always re-check on the server.";
});