Form Validation in JavaScript

<form id="signupForm" novalidate>
  <input type="email" name="email" required placeholder="Email">
  <input type="password" name="password" minlength="8" required placeholder="Password">
  <input type="number" name="age" min="18" max="120">
  <input type="text" name="username" pattern="[A-Za-z0-9_]{3,16}" required>
  <button type="submit">Sign up</button>
</form>

const form = document.getElementById('signupForm');
const email = form.elements.email;

// HTML5 built-in validation API
console.log(email.validity.valid);       // boolean
console.log(email.validity.valueMissing); // true if required & empty
console.log(email.checkValidity());       // triggers validity check, returns boolean

// Custom JS validation on submit
form.addEventListener('submit', (event) => {
  event.preventDefault(); // stop native submission/reload while we validate

  if (!form.checkValidity()) {
    form.reportValidity(); // show native error bubbles
    return;
  }
  const password = form.elements.password.value;
  if (password.toLowerCase() === password) {
    email.setCustomValidity('Password must contain an uppercase letter');
    form.reportValidity();
    return;
  }
  email.setCustomValidity(''); // clear any previous custom error
  console.log('Form is valid, submitting via fetch...');
});

<form id="loginForm">
  <input type="email" id="email" required>
  <input type="password" id="pwd" minlength="8" required>
  <span id="error"></span>
  <button type="submit">Login</button>
</form>

const form = document.getElementById('loginForm');
const errorSpan = document.getElementById('error');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  errorSpan.textContent = '';

  const emailInput = document.getElementById('email');
  const pwdInput = document.getElementById('pwd');

  if (!emailInput.validity.valid) {
    errorSpan.textContent = 'Please enter a valid email address.';
    return;
  }
  if (pwdInput.value.length < 8) {
    errorSpan.textContent = 'Password must be at least 8 characters.';
    return;
  }
  console.log('Validated -- submitting login for', emailInput.value);
});

// Simulate: user types "bademail" and password "123" then submits
emailInput.value = 'bademail';
pwdInput.value = '123';

On submit with email = 'bademail', password = '123':

1. e.preventDefault() stops the native page reload.
2. emailInput.validity.valid is false (type="email" requires an '@' and domain).
3. errorSpan text content becomes:
   "Please enter a valid email address."
4. console.log('Validated -- submitting...') does NOT run.

If corrected to email = '[email protected]', password = '123' (7 chars, too short):
errorSpan text becomes:
   "Password must be at least 8 characters."

Only when both checks pass does the console print:
   "Validated -- submitting login for [email protected]"