Customize HTML5 Validation Messages in ASP.NET MVC
HTML5 allows you to put constraints on the data entered in form fields
through several techniques. These techniques include new input types (such as
email and url) and attributes such as required and pattern. When these
constraints are violated the browser shows an error message callout and the form
submission is cancelled. Although this default arrangement works great in many
applications, at times you may want to customize the error messages and how they
are displayed. This article explains how such a customization can be achieved
with the help of a couple of new events and a dash of jQuery code.
Before you go ahead and customize the inbuilt validation messages, have a
look at the following figure that shows how Chrome displaying validation error
on an email field.

As you can see the default error message is displayed in a callout and you
don't have any direct control on the look and feel of this callout. If you are
developing an ASP.NET MVC application, chances are you are already using HTML
helpers such as ValidationMessage() and ValidationSummary(). For the sake of
consistency you may want to display HTML5 validation messages just like ASP.NET
MVC helpers rather than a callout. Additionally, you may want to customize the
error message text being displayed.
The above tasks can be accomplished by handling these two HTML5 events:
The input event is raised whenever some content is inputted in an editable
control such as textbox. Instead of handling keypress or keydown the input event
is a great place to put custom validation logic. The invalid event is raised for
a form field if its value violates the constraints imposed on it. These
constraints can be in the form of input types (for example, email), required
attribute, pattern attribute or even a custom constraint imposed through
JavaScript code.
Using input types or inbuilt HTML5 attributes is quite straightforward.
Adding a custom constraint usually involves handing input event to perform a
custom validation and then flagging the success or failure of the validation
through setCustomValidity() method of HTML5. The setCustomValidity() method is
also used to customize the error messages of the inbuilt validations.
The following figure shows the same email validation after customization.

Now let's see the code that makes this work.
We will do the following:
- Put constraint on the textbox so that its value must be an email
address.
- The textbox must contain a value.
- The email address must be lesser than 50 characters.
The first constraint can be added by setting the type attribute of the
<input> element to email. The second constraint can be added by setting the
required attribute on the <input> element. The third constraint can be added
using input event handler. You can also add the third constraint through other
techniques such as pattern attribute but we will use input event handler to
illustrate its use in overall validation process. The following markup shows how
a sample <form> from an ASP.NET MVC view looks like:
<form action="/home/index" method="post">
<input type="email" id="email" required />
<span id="shorterrormsg">*</span>
<br /><br />
<input type="submit" value="Submit" />
</form>
<br />
<div id="longerrormsg"></div>
The shorterrormsg <span> element is used to display the * whenever there is
an error. The longerrormsg <div> element is used to display the descriptive
error message.
The following code shows the input event handler of the email textbox.
$("#email").on("input", function (evt) {
if (evt.target.value.length>50) {
evt.target.setCustomValidity("Email too long!!!");
$("#shorterrormsg").show();
$("#longerrormsg").html("Email too long!!!");
}
else
{
evt.target.setCustomValidity("");
$("#shorterrormsg").hide();
$("#longerrormsg").html("");
}
});
The input event handler checks the length of the text entered in the email
textbox. If its length is greater than 50 characters the code calls the
setCustomValidity() method on the email textbox (accessed as evt.target
property). The setCustomValidity() method accepts an error message to be
displayed. If the parameter to setCustomValidity() is a non-empty string the
browser treats it as a validation error and also displays it using default
callout. The code also shows the short error message <span> element and also
adds an error message to the long error message <div> element.
The else block of the code sets the error message to an empty string
indicating that there is no validation error. The <span> and <div> elements are
also cleared.
The following code shows the invalid event handler of the email textbox.
$("#email").on("invalid", function (evt) {
var reason = evt.target.validity;
if (!reason.customError) {
if (reason.typeMismatch) {
evt.target.setCustomValidity("Invalid email address!!!");
$("#longerrormsg").html("Invalid email address!!!");
}
if (reason.valueMissing) {
evt.target.setCustomValidity("Email must be entered!!!");
$("#longerrormsg").html("Email must be entered!!!");
}
}
$("#shorterrormsg").show();
});
The invalid event handler grabs the validity object of the email textbox. The
validity object gives you more information about what went wrong. If the reason
for validation failure is type mismatch (for example, an invalid email address
was entered.) the code sets a custom error message using setCustomValidity()
method. Similarly, if the value is missing from the email textbox another custom
error message is set.
Why do we check that the reason is not customError? That's because we don't
want to override the error message from the input event handler. When you set
the error message in the input event handler the validity of the email textbox
becomes customError. If you don't put this check the error message from the
input event handler (if any) will be overwritten by the new value assigned in
the invalid event handler.
If you run the application now, you will see the results as shown below:

So far so good. What if you wish to hide the default error callout? In that
case you need to modify the invalid event handler like this:
$(document).ready(function () {
$("#shorterrormsg").hide();
$("#email").on("input", function (evt) {
...
});
$("#email").on("invalid", function (evt) {
...
$("#shorterrormsg").show();
evt.preventDefault();
});
});
Calling preventDefault() at the end of invalid event handler will prevent the
display of the default error callout and will display the error messages only in
the <span> and <div> elements.