HTML Form Validation Guide

Learn how to implement client-side form validation using HTML and JavaScript

Introduction to Form Validation

Form validation is essential for ensuring data quality and improving user experience. HTML5 introduced built-in validation attributes, while JavaScript allows for more complex validation logic and better user feedback.

Basic Validation

Required Fields

Marking fields as required using the required attribute

Username *

<form>
  <label for="username" class="required">Username</label>
  <input type="text" id="username" name="username" required>
  
  <button type="submit">Submit</button>
</form>

<style>
  .required::after {
    content: " *";
    color: #e74c3c;
  }
</style><form>
  <label for="username" class="required">Username</label>
  <input type="text" id="username" name="username" required>
  
  <button type="submit">Submit</button>
</form>

<style>
  .required::after {
    content: " *";
    color: #e74c3c;
  }
</style>

Email Validation

Using type='email' for automatic email format validation

<form>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form><form>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form>

Number Range

Setting minimum and maximum values for number inputs

Age (18-120)

<form>
  <label for="age">Age (18-120)</label>
  <input type="number" id="age" name="age" min="18" max="120">
  
  <button type="submit">Submit</button>
</form><form>
  <label for="age">Age (18-120)</label>
  <input type="number" id="age" name="age" min="18" max="120">
  
  <button type="submit">Submit</button>
</form>

HTML5 Validation Attributes

Pattern Matching

Using regex patterns for custom validation

ZIP Code

<form>
  <label for="zipcode">ZIP Code</label>
  <input type="text" id="zipcode" name="zipcode" 
         pattern="[0-9]{5}" title="5-digit ZIP code">
  
  <button type="submit">Submit</button>
</form><form>
  <label for="zipcode">ZIP Code</label>
  <input type="text" id="zipcode" name="zipcode" 
         pattern="[0-9]{5}" title="5-digit ZIP code">
  
  <button type="submit">Submit</button>
</form>

Password Strength

Enforcing password complexity with pattern attribute

Password

<form>
  <label for="password">Password</label>
  <input type="password" id="password" name="password"
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
         title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters">
  
  <button type="submit">Submit</button>
</form><form>
  <label for="password">Password</label>
  <input type="password" id="password" name="password"
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
         title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters">
  
  <button type="submit">Submit</button>
</form>

Custom Error Messages

Overriding default validation messages

Username

<form id="customMessageForm">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('customMessageForm').addEventListener('invalid', function(e) {
    e.preventDefault();
    if (e.target.id === 'username') {
      e.target.setCustomValidity('Please enter your username');
    }
    e.target.reportValidity();
  }, true);
</script><form id="customMessageForm">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('customMessageForm').addEventListener('invalid', function(e) {
    e.preventDefault();
    if (e.target.id === 'username') {
      e.target.setCustomValidity('Please enter your username');
    }
    e.target.reportValidity();
  }, true);
</script>

JavaScript Validation

Password Match

Confirm password matches using JavaScript

Password

Confirm Password

<form id="passwordForm">
  <label for="password">Password</label>
  <input type="password" id="password" name="password" required>
  
  <label for="confirmPassword">Confirm Password</label>
  <input type="password" id="confirmPassword" name="confirmPassword" required>
  <div id="passwordError" class="error-message"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('passwordForm').addEventListener('submit', function(e) {
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirmPassword');
    const errorElement = document.getElementById('passwordError');
    
    if (password.value !== confirmPassword.value) {
      errorElement.textContent = 'Passwords do not match';
      e.preventDefault();
    }
  });
</script><form id="passwordForm">
  <label for="password">Password</label>
  <input type="password" id="password" name="password" required>
  
  <label for="confirmPassword">Confirm Password</label>
  <input type="password" id="confirmPassword" name="confirmPassword" required>
  <div id="passwordError" class="error-message"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('passwordForm').addEventListener('submit', function(e) {
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirmPassword');
    const errorElement = document.getElementById('passwordError');
    
    if (password.value !== confirmPassword.value) {
      errorElement.textContent = 'Passwords do not match';
      e.preventDefault();
    }
  });
</script>

Real-time Validation

Validate inputs as user types

<form id="realtimeForm">
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
  <div id="emailMessage" class="validation-message"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('email').addEventListener('input', function() {
    const message = document.getElementById('emailMessage');
    if (this.validity.typeMismatch) {
      message.textContent = 'Please enter a valid email';
      message.className = 'validation-message invalid';
    } else if (this.value === '') {
      message.textContent = '';
    } else {
      message.textContent = 'Valid email';
      message.className = 'validation-message valid';
    }
  });
</script><form id="realtimeForm">
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
  <div id="emailMessage" class="validation-message"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('email').addEventListener('input', function() {
    const message = document.getElementById('emailMessage');
    if (this.validity.typeMismatch) {
      message.textContent = 'Please enter a valid email';
      message.className = 'validation-message invalid';
    } else if (this.value === '') {
      message.textContent = '';
    } else {
      message.textContent = 'Valid email';
      message.className = 'validation-message valid';
    }
  });
</script>

Custom Validation Logic

Implement complex validation rules with JavaScript

Username

<form id="complexForm">
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  <div id="usernameError" class="error-message"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('complexForm').addEventListener('submit', function(e) {
    const username = document.getElementById('username');
    const errorElement = document.getElementById('usernameError');
    const usernameRegex = /^[a-zA-Z0-9_]{4,20}$/;
    
    if (!usernameRegex.test(username.value)) {
      errorElement.textContent = 'Username must be 4-20 characters and can only contain letters, numbers, and underscores';
      e.preventDefault();
    }
  });
</script><form id="complexForm">
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  <div id="usernameError" class="error-message"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('complexForm').addEventListener('submit', function(e) {
    const username = document.getElementById('username');
    const errorElement = document.getElementById('usernameError');
    const usernameRegex = /^[a-zA-Z0-9_]{4,20}$/;
    
    if (!usernameRegex.test(username.value)) {
      errorElement.textContent = 'Username must be 4-20 characters and can only contain letters, numbers, and underscores';
      e.preventDefault();
    }
  });
</script>

Common Validation Patterns

Phone Number

Validate phone number format

Phone Number

<form>
  <label for="phone">Phone Number</label>
  <input type="tel" id="phone" name="phone" 
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
         placeholder="123-456-7890">
  
  <button type="submit">Submit</button>
</form><form>
  <label for="phone">Phone Number</label>
  <input type="tel" id="phone" name="phone" 
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
         placeholder="123-456-7890">
  
  <button type="submit">Submit</button>
</form>

Credit Card

Validate credit card number format

Credit Card

<form>
  <label for="creditcard">Credit Card</label>
  <input type="text" id="creditcard" name="creditcard" 
         pattern="[0-9]{13,16}" 
         placeholder="1234567890123456">
  
  <button type="submit">Submit</button>
</form><form>
  <label for="creditcard">Credit Card</label>
  <input type="text" id="creditcard" name="creditcard" 
         pattern="[0-9]{13,16}" 
         placeholder="1234567890123456">
  
  <button type="submit">Submit</button>
</form>

Date Format

Validate date in MM/DD/YYYY format

Expiration Date (MM/DD/YYYY)

<form>
  <label for="date">Expiration Date (MM/DD/YYYY)</label>
  <input type="text" id="date" name="date" 
         pattern="(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(19|20)\d{2}" 
         placeholder="MM/DD/YYYY">
  
  <button type="submit">Submit</button>
</form><form>
  <label for="date">Expiration Date (MM/DD/YYYY)</label>
  <input type="text" id="date" name="date" 
         pattern="(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(19|20)\d{2}" 
         placeholder="MM/DD/YYYY">
  
  <button type="submit">Submit</button>
</form>

Accessible Validation

ARIA Attributes

Using ARIA for accessible validation messages

Username

<form id="ariaForm">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" 
         aria-describedby="usernameError" required>
  <div id="usernameError" role="alert" aria-live="assertive"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('ariaForm').addEventListener('submit', function(e) {
    const username = document.getElementById('username');
    const errorElement = document.getElementById('usernameError');
    
    if (!username.value) {
      username.setAttribute('aria-invalid', 'true');
      errorElement.textContent = 'Username is required';
      e.preventDefault();
    } else {
      username.setAttribute('aria-invalid', 'false');
      errorElement.textContent = '';
    }
  });
</script><form id="ariaForm">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" 
         aria-describedby="usernameError" required>
  <div id="usernameError" role="alert" aria-live="assertive"></div>
  
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('ariaForm').addEventListener('submit', function(e) {
    const username = document.getElementById('username');
    const errorElement = document.getElementById('usernameError');
    
    if (!username.value) {
      username.setAttribute('aria-invalid', 'true');
      errorElement.textContent = 'Username is required';
      e.preventDefault();
    } else {
      username.setAttribute('aria-invalid', 'false');
      errorElement.textContent = '';
    }
  });
</script>

Visual Indicators

Combining visual and non-visual cues for validation

Enter your email address

<form id="visualForm">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" 
         aria-describedby="emailHelp emailError">
  <div id="emailHelp" class="help-text">Enter your email address</div>
  <div id="emailError" role="alert" class="error-message"></div>
  
  <button type="submit">Submit</button>
</form>

<style>
  input:invalid {
    border-color: #e74c3c;
  }
  input:valid {
    border-color: #2ecc71;
  }
  .error-message {
    color: #e74c3c;
  }
  .help-text {
    color: #7f8c8d;
    font-size: 0.875rem;
  }
</style><form id="visualForm">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" 
         aria-describedby="emailHelp emailError">
  <div id="emailHelp" class="help-text">Enter your email address</div>
  <div id="emailError" role="alert" class="error-message"></div>
  
  <button type="submit">Submit</button>
</form>

<style>
  input:invalid {
    border-color: #e74c3c;
  }
  input:valid {
    border-color: #2ecc71;
  }
  .error-message {
    color: #e74c3c;
  }
  .help-text {
    color: #7f8c8d;
    font-size: 0.875rem;
  }
</style>

< Previous Next >