Client-Side Validation

HTML

<form id="signupForm" novalidate>
  <div class="field">
    <label for="name">Name</label>
    <input id="name" name="name" placeholder="Your name" required>
    <div id="err-name" class="error"></div>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" placeholder="you@example.com" required>
    <div id="err-email" class="error"></div>
  </div>
  <div class="field">
    <label for="password">Password (min 8)</label>
    <input id="password" name="password" type="password" minlength="8" required>
    <div id="err-password" class="error"></div>
  </div>
  <button class="btn" type="submit">Submit</button>
  <div id="result" class="result">Form is valid and ready to submit!</div>
</form>

CSS

.field input { border: 1px solid #cbd5e1; border-radius: 6px; }

JavaScript

function validateEmail(email) { const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return pattern.test(email); }