ValidationMessage HTML Helper in MVC3 Razor

Home » HTML » HTML Helper » MVC 3 » ValidationMessage HTML Helper in MVC3 Razor

ValidationMessage HTML Helper in MVC3 Razor

Posted by 20Fingers2Brains on Tags: HTML , HTML Helper , MVC 3

Html.ValidationMessage helper is used to display validation errors or messages.
When there is an error for a particluar field in the ModelState dictionary, we can use the ValidationMessage helper to display the message.
This helper renders the message inside span element and gives the text red color.

View Demo

It has following overloads :

Overload 1 :

This overload accepts the name of the field for which the model error is going to be logged from the controller.

Syntax :

<p>
    @Html.ValidationMessage("Error")
</p>

Action Method :

We have added a model error using the same key i.e. Error, for which we have used ValidationMessage helper.

UI :

The text in red color is the message displayed using ValidationMessage helper.

Rendered HTML :

    <span class="field-validation-error">Error Occured</span>

The message is displayed inside span element. The CSS class is added to span element by default which gives the text red color. The CSS class is defined in default Site.css file.

This overload accepts field name and htmlAttributes object.

Syntax :

<p>
    @Html.ValidationMessage("Error", new {@class = "validationText"})
</p>

Action Method :

UI :

The style class is applied as passed in htmlAttributes object.

Rendered HTML :

    <span class="field-validation-error validationText">Error Occured</span>

We can see two CSS classes assigned, one which is applied by default and one which is added by us as htmlAttribute object.

Overload 3 :

This overload accepts field name and validation message to show as well. The field name is basically model's property name on which some Data Annotation validations have been defined. When validations fails, for the specified property the validation message specified as the parameter is displayed on UI.

Syntax :

<p>
    @Html.ValidationMessage("FirstName","FirstName is Mandatory Field!")
</p>

UI :

We have a form, where we have used Data Annotation attribute to take care of missing fields and to apply validations. In the above scenario we had supplied all the fields except FirstName. So validation fails for FirstName and validation message is shown for FirstName.

Rendered HTML :

    <span class="field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="false">FirstName is Mandatory!</span>

Overload 4 :

This overload accepts field name and IDictionary object of htmlAttributes.

Syntax :

<p>
    @Html.ValidationMessage("Error",attributes)
</p>

We have created an IDictionary object of attributes. This object is passed as a parameter.

UI :

Rendered HTML :

    <span class="field-validation-error validationText" style="font-style:italic">Error Occured</span>

Overload 5 :

Syntax :

<p>
    @Html.ValidationMessage("FirstName", "FirstName is Mandatory!", new { style="font-style:italic"})
</p>

UI :

Rendered HTML :

    <span class="field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="false" style="font-style:italic">FirstName is Mandatory!</span>

Overload 6 :

Syntax :

<p>
    @Html.ValidationMessage("FirstName", "FirstName is Mandatory!", attributes)
</p>

UI :

Rendered HTML:

    <span class="field-validation-error validationText" data-valmsg-for="FirstName" data-valmsg-replace="false" style="font-style:italic">FirstName is Mandatory!</span>

The text is changes and displayed according to the attributes passed as object of htmlAttributes of type IDIctionary.