Validation Message and validation Summary

Validation Message and validation Summary in ASP.NET MVC

In this article, I will discuss the following three things

  1. ValidationMessage
  2. ValidationMessageFor
  3. ValidationSummary
Validation Message:

We have learned how to implement validation in a view in the previous articles. Here, we will see the HtmlHelper extension method validation message in detail.

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.

Validation Method Signature:

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 custom error message 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.

<span class=”text-danger field-validation-error”

data-valmsg-for=”FirstName”

data-valmsg-replace=”true”>

<span for=”FirstName” generated=”true” class=””>First Name is Required</span>

</span>

ValidationMessageFor:

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.

validationMessageFor signature:

MvcHtmlString ValidateMessage(Expression<Func<dynamic, TProperty>> 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 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.

<span class=”text-danger field-validation-error”

data-valmsg-for=”FirstName”

data-valmsg-replace=”true”>

<span for=”FirstName” generated=”true” class=””>First Name is Required</span>

</span>

ValidationSummary:

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. The following figure shows how ValidationSummary displays the 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”)

Now run the application and submit the form without filling the data. It will show the errors as shown below

Validation Message and validation Summary in ASP.NET MVC

In the next article, I will discuss Remote validation in ASP.NET MVC.

SUMMARY

In this article, I try to explain Validation Message and validation Summary in ASP.NET MVC application step by step with some real time examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *