forum

Home / DeveloperSection / Forums / How to apply custom error messages for form validation errors using the setCustomValidity() method?

Ask Question
Utpal Vishwas

Utpal Vishwas

Follow
I am Utpal Vishwas from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

15-May-2023

The setCustomValidity() method of the HTMLObjectElement interface sets a custom validity message for the element.

Here is an example of how to apply custom error messages for form validation errors using the setCustomValidity() method:

Code snippet

<input id="name" type="text" required>
<p id="error"></p>

<script>
document.getElementById("name").onblur = function() {
  // Check if the name field is empty
  if (this.value === '') {
    // Set a custom error message
    this.setCustomValidity("Please enter your name.");
  } else {
    // Clear the custom error message
    this.setCustomValidity("");
  }
};
</script>

In this example, the name field is required. If the name field is empty, the setCustomValidity() method will set a custom error message to "Please enter your name." If the name field is not empty, the setCustomValidity() method will clear the custom error message.

The setCustomValidity() method can also be used to set custom error messages for other types of form validation errors. For example, the following code sets a custom error message for a form field that is too short:

Code snippet

<input id="password" type="password" required minlength="8">
<p id="error"></p>

<script>
document.getElementById("password").onblur = function() {
  // Check if the password field is too short
  if (this.value.length < 8) {
    // Set a custom error message
    this.setCustomValidity("The password must be at least 8 characters long.");
  } else {
    // Clear the custom error message
    this.setCustomValidity("");
  }
};
</script>

By using the setCustomValidity() method, you can customize the error messages that are displayed for form validation errors. This can help users to understand why their form is not valid and how to correct the errors.

MindStick Training

Liked By