How to create Validation Message and Validation Summary in ASP.NET MVC?. The Complete ASP.NET MVC Developer Course 2023 [Videos].

In this Video, I am going to discuss Validation Message and Validation Summary in ASP.NET MVC Application. Please read our previous Video where we discussed the DataType and Compare Attributes in ASP.NET MVC Application. As part of this Video, you will understand the following three attributes with examples.

1. ValidationMessage
2. ValidationMessageFor
3. ValidationSummary

ValidationMessage Attribute in ASP.NET MVC:

The Html.ValidationMessage() is an extension method, that is a loosely typed method. It displays a validation message if an error exists for the specified field in the ModelStateDictionary object. The Validation Method Signature is given below:
MvcHtmlString ValidateMessage(string modelName, string validationMessage, object htmlAttributes)

Consider the following ValidationMessage example.
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessage(“FirstName”, “”, new { @class = “text-danger” })

In the above example, the first parameter in the ValidationMessage method is a property name for which we want to show the error message e.g. Employee First Name. The second parameter is for the custom error messages and the third parameter is for html attributes like css, style, etc.

The ValidationMessage() method will only display an error if you have configured the DataAnnotations attribute to the specified property in the model class.

The above code will generate following html.

<input class="form-control text-box single-line"

data-val="true"

data-val-required="First Name is Required"

id="FirstName"

name="FirstName"

type="text"

value="">

<span class="field-validation-valid text-danger"

data-valmsg-for="FirstName"

data-valmsg-replace="true"></span>

Now, when the user submits a form without entering a FirstName, then ASP.NET MVC uses a data- attribute of HTML5 for the validation and validation message will be injected, when the validation error occurs, as shown below.

data-valmsg-for=”FirstName”
data-valmsg-replace=”true”>
First Name is Required

ValidationMessageFor Attribute in ASP.NET MVC:

The Html.ValidationMessageFor() is a strongly typed extension method. It displays a validation message if an error exists for the specified field in the ModelStateDictionary object. The validationMessageFor signature is given below.

MvcHtmlString ValidateMessage(Expression> expression, string validationMessage, object htmlAttributes)

Consider the following ValidationMessageFor() example.

@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.FirstName, “”, new { @class = “text-danger” })

In the above example, the first parameter in ValidationMessageFor method is a lambda expression to specify a property for which we want to show the error message. The second parameter is for custom error message and the third parameter is for html attributes like css, style etc.

The ValidationMessageFor() method will only display an error if you have configured the DataAnnotations attribute to the specifed property in the model class.

The above code will generate following html.

<input class="form-control text-box single-line"

data-val="true"

data-val-required="First Name is Required"

id="FirstName"

name="FirstName"

type="text"

value="">

<span class="field-validation-valid text-danger"

data-valmsg-for="FirstName"

data-valmsg-replace="true"></span>

Now, when the user submits the form without entering the FirstName then ASP.NET MVC uses the data- attribute of HTML5 for the validation and the validation message will be injected when validation error occurs, as shown below.

data-valmsg-for=”FirstName”
data-valmsg-replace=”true”>
First Name is Required

ValidationSummary Attribute in ASP.NET MVC Application:

The ValidationSummary helper method generates an unordered list (ul element) of validation messages that are in the ModelStateDictionary object. The ValidationSummary can be used to display all the error messages for all the fields. It can also be used to display custom error messages. 

Displaying all validation errors at one place using validation summary HTML helper

To display all errors at one place, use ValidationSummary() HTML helper. 

@Html.ValidationSummary(false, “Please fix the following errors and then submit the form”)

The following figure shows how ValidationSummary displays the error messages. Now run the application and submit the form without filling the data. It will show the errors as shown below