---
title: "How to apply custom error messages for form validation errors using the setCustomValidity() method?"  
description: "How to apply custom error messages for form validation errors using the setCustomValidity() method?"  
author: "Utpal Vishwas"  
published: 2023-05-11  
updated: 2023-05-15  
canonical: https://www.mindstick.com/forum/158277/how-to-apply-custom-error-messages-for-form-validation-errors-using-the-setcustomvalidity-method  
category: "html"  
tags: ["jquery validate", "html form", "form validation", "html validation"]  
reading_time: 2 minutes  

---

# How to apply custom error messages for form validation errors using the setCustomValidity() method?

How to [apply](https://www.mindstick.com/articles/13148/discover-to-apply-make-up-like-a-professional-supermodel) [custom](https://www.mindstick.com/blog/12298/use-custom-writing-services-to-get-through-the-finals) [error messages](https://www.mindstick.com/forum/160245/how-to-customize-error-messages-with-a-data-annotation-in-asp-dot-net-core) for form [validation errors](https://www.mindstick.com/forum/160109/how-to-handle-exceptions-caused-by-data-validation-errors-in-api-input-parameters) using the setCustomValidity() [method](https://www.mindstick.com/forum/166/webservice-method)?

## Replies

### Reply by Aryan Kumar

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](https://yourviews.mindstick.com/view/88527/fixing-quickbooks-error-4120-reinstalling-vs-repairing) [messages](https://www.mindstick.com/news/4166/google-rolling-out-gemini-extensions-for-messages-whatsapp-and-spotify) for [form validation](https://www.mindstick.com/forum/158694/how-can-perform-form-validation-using-jquery) [errors](https://answers.mindstick.com/qa/116170/fresh-fir-against-gandhis-in-national-herald-case-cover-up-for-ed-s-own-errors) using the setCustomValidity() method:

Code snippet

```plaintext
<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

```plaintext
<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.


---

Original Source: https://www.mindstick.com/forum/158277/how-to-apply-custom-error-messages-for-form-validation-errors-using-the-setcustomvalidity-method

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.