MVC || Validation || Understanding Validation Helpers

Understanding Validation Helpers

 

The ASP.NET MVC framework includes two validation helpers:

 

• Html.ValidationMessage() helper and
• Html.ValidationSummary() helper.

 

These helpers are used in the Create and Edit views.

 

	Html.ValidationMessage()	GET	Used to output the ModelState error message associated with a particular model property.   <%= Html.TextBox("EventDate") %> <%= Html.ValidationMessage("EventDate", "*") %> <%= Html.ValidationMessage("EventDate") %>     Now in case if you enter 'BOGUS' in place of a date in EventDate textbox, below error will be generated respectively.   Outputs:   <input class="input-validation-error" id="EventDate" name=" EventDate" type="text" value="" /> <span class="field-validation-error"> * </span> // OR Below <span class="field-validation-error"> The value 'BOGUS' is invalid</span>
	Html.ValidationSummary()	POST	Used to render a summary error message, accompanied by a <ul><li/></ul> list of all detailed error messages in the ModelState collection.   <%= Html.ValidationSummary("Please correct the errors and try again.") %>     Output –   <span class="validation-summary-errors">Please correct below errors and try again</span> <ul class="validation-summary-errors">     <li>This is required</li>     <li>Phone# does not match summary</li> </ul>

 

 

Error formatting –

 

Notice that the appearance of the HTML input fields are also modified whenever there is a validation error.

There are three cascading style sheet classes used to control the appearance of these validation errors:

 

• input-validation-error – Applied to the <input> tag rendered by Html.TextBox() helper.
• field-validation-error – Applied to the <span> tag rendered by the Html.ValidationMessage() helper.
• validation-summary-errors – Applied to the <ul> tag rendered by the Html.ValidationSumamry() helpe

 

These CSSs can be modified, and therefore modify the appearance of the validation errors, by modifying the Site.css file located in the Content folder.

 

Note –

 

The HtmlHelper class includes read-only static properties for retrieving the names of the validation related CSS classes. These static properties are named as:

 

-          ValidationInputCssClassName,

-          ValidationFieldCssClassName, and

-          ValidationSummaryCssClassName.

 

 

Where do these validation error messages come from?

 

Here is the root cause -  Whenever HTML form is submitted for creating an Entity (Here- Dinner), and when invalid values are assigned for the respective fields, you'll get the validation messages displayed.

e.g. Below is an example of creating an object in two ways.

 

 

[AcceptVerbs(HttpVerbs.Post)] public ActionResult Create(FormCollection collection) {     Dinner dinner = new Dinner();       try     {             UpdateModel(dinner);             dinnerRepository.Add(dinner);             dinnerRepository.Save();             return RedirectToAction("Details", new { id = dinner.DinnerID });     }     catch     {             ModelState.AddRuleViolations(dinner.GetRuleViolations());              return View(dinner);     } }

[AcceptVerbs(HttpVerbs.Post)] public ActionResult Create(Dinner dinner) {     try     {             UpdateModel(dinner);             dinnerRepository.Add(dinner);             dinnerRepository.Save();             return RedirectToAction("Details", new { id = dinner.DinnerID });     }     catch     {             ModelState.AddRuleViolations(dinner.GetRuleViolations());              return View(dinner);     } }

 

 

The values of the HTML form fields from the Create form are bound to the dinner object (Orange Text in above) by something called a Model Binder.

This default model binder adds an error message to model state automatically when it cannot bind a form field to a form property.

 

In our example above - The default model binder cannot bind the string "BOGUS" to the 'EventDate' property of the Dinner class. You can't assign a string to a DateTime property.

Therefore, the model binder adds an error to model state.

 

Hope this is clear now.

 

Thanks & Regards,

Arun Manglick || Senior Tech Lead