JavaScript Validation API

The JavaScript Validation API provides a set of methods and properties to validate HTML form inputs. It simplifies client-side form validation, offering a programmatic way to check and ensure that user input meets specific requirements before submission.

Key Features of the Validation API

  1. Built-in Validation Messages: Automatically display validation messages for incorrect input.
  2. Custom Validations: Add your own validation rules using JavaScript.
  3. Immediate Feedback: Validate form inputs in real-time as users interact with them.
  4. Support for Constraints: Leverages HTML5 attributes like required, pattern, min, max, and type.

Methods in the Validation API

  • checkValidity()
    • Checks if an input element meets its constraints.
    • Returns true if valid; otherwise, false.
    • Example: 
let input = document.getElementById('email');
if (!input.checkValidity()) {
    console.log(input.validationMessage);
}
  • reportValidity()
    • Displays validation messages to the user.
    • Example: 
let input = document.getElementById('email');
input.reportValidity();
  • setCustomValidity(message)
    • Sets a custom validation message. If a custom message is set, the element is invalid until the message is cleared.
    • Example: 
let input = document.getElementById('email');
input.setCustomValidity("Please enter a valid email address.");
input.reportValidity();

Properties of the Validation API

  • validity
    • An object that provides detailed information about the validity state of the input.
    • Properties include:
      • valid: Indicates if the input is valid.
      • valueMissing: True if the input is required but empty.
      • typeMismatch: True if the input does not match the type (e.g., email).
      • patternMismatch: True if the input does not match the specified pattern.
      • tooLong / tooShort: Input length constraints.
    • Example: 
let input = document.getElementById('username');
if (input.validity.valueMissing) {
    console.log("This field is required.");
}
  • willValidate
    • Returns true if the element is subject to validation.
    • Example: 
let input = document.getElementById('age');
console.log(input.willValidate); // true or false
  • validationMessage
    • Provides the default or custom validation message.
    • Example: 
let input = document.getElementById('email');
console.log(input.validationMessage);

Example: Using the Validation API

Here’s a complete example of validating a form with the Validation API:

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

<script>
  const form = document.getElementById('myForm');
  
  form.addEventListener('submit', function(event) {
      const emailInput = document.getElementById('email');
      
      // Check validity
      if (!emailInput.checkValidity()) {
          // Prevent form submission
          event.preventDefault();
          // Display validation message
          emailInput.reportValidity();
      }
  });
</script>

Benefits of the Validation API

  1. Simplifies Validation: Reduces the need for extensive custom validation logic.
  2. Improves User Experience: Provides immediate feedback to users.
  3. Built-in Browser Support: Leverages HTML5 validation attributes.

Conclusion

The JavaScript Validation API is a powerful tool for handling client-side form validation efficiently. It integrates seamlessly with HTML5 form elements, ensuring robust and user-friendly input validation. For more coding tutorials and examples, visit The Coding College.

Leave a Comment