ValidationMessage:

You have learned how to implement validation in a view in the presious section. Here, we will see the HtmlHelper extension method ValidtionMessage 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.

ValidationMessage() Signature:

MvcHtmlString ValidateMessage(string modelName, string validationMessage, object htmlAttributes)

Visit MSDN to know all the overloads of ValidationMessage() method.

Consider the following ValidationMessage example.

@model Student  
    
@Html.Editor("StudentName") <br />
@Html.ValidationMessage("StudentName", "", 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. StudentName. 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 specifed property in the model class. The following is a Student model class where the DataAnnotations attribute "Required" is applied to the StudentName property.

public class Student
{
    public int StudentId { get; set; }
    [Required]
    public string StudentName { get; set; }
    public int Age { get; set; }
}

The above code will generate following html.

<input id="StudentName" 
        name="StudentName" 
        type="text" 
        value="" />


<span class="field-validation-valid text-danger" 
        data-valmsg-for="StudentName" 
        data-valmsg-replace="true">
</span>

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

<span class="field-validation-error text-danger" 
            data-valmsg-for="StudentName" 
            data-valmsg-replace="true">The StudentName field is required.</span>

The error message will look like below.

Custom Error Message:

You can display your own error message instead of the default error message as shown above. You can provide a custom error message either in the DataAnnotations attribute or ValidationMessage() method.

Use the parameter of the DataAnnotation attributes to provide your own custom error message as shown below.

public class Student
{
    public int StudentId { get; set; }
    [Required(ErrorMessage="Please enter student name.")]
    public string StudentName { get; set; }
    public int Age { get; set; }
}

Also, you can specify a message as a second parameter in the ValidationMessage() method as shown below.

@model Student  
    
@Html.Editor("StudentName") <br />
@Html.ValidationMessage("StudentName", "Please enter student name.", new { @class = "text-danger" })

Learn about ValidationMessageFor method in the next section.