How do you implement client-side form validation using HTML5's built-in form validation features?

Question

Aryan Kumar · Answer

HTML5 introduced a number of built-in form validation features that can be used to validate form data client-side. These features include:

Required attributes: The required attribute can be used to make a form field mandatory. When the required attribute is present, the user must fill out the field before submitting the form.
Pattern attributes: The pattern attribute can be used to specify a regular expression that the user input must match. For example, the following code specifies that the value of the email field must match the regular expression for a valid email address:

Code snippet

<input type="email" name="email" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">

Minlength and maxlength attributes: The minlength and maxlength attributes can be used to specify the minimum and maximum length of the user input, respectively. For example, the following code specifies that the value of the password field must be at least 8 characters long:

Code snippet

<input type="password" name="password" minlength="8">

Custom validation functions: Custom validation functions can be used to validate the user input based on any criteria. For example, the following code defines a custom validation function that checks if the value of the username field is already in use:

Code snippet

function validateUsername(username) {
  // Get the list of all usernames
  var usernames = ['johndoe', 'janedoe'];

  // Check if the username is already in use
  return usernames.indexOf(username) === -1;
}

Once you have defined your validation rules, you can implement client-side form validation by adding event listeners to the form fields. For example, the following code adds an event listener to the email field that checks if the value of the field matches the regular expression for a valid email address:

Code snippet

document.getElementById("email").addEventListener("blur", function() {
  // Check if the value of the email field matches the regular expression for a valid email address
  if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.value)) {
    // Display an error message
    this.setCustomValidity("Please enter a valid email address.");
  } else {
    // Clear the error message
    this.setCustomValidity("");
  }
});

By implementing client-side form validation, you can help to ensure that the data submitted by users is valid before it is sent to the server. This can help to prevent errors and improve the user experience.

forum

How do you implement client-side form validation using HTML5's built-in form validation features?

Can you answer this question?

1 Answers