Client-Side Validation

Learning objectives#

• Enable unobtrusive client-side validation
• Read the data-val attributes MVC generates
• Show messages with ValidationMessageFor and ValidationSummary
• Know why the server must still validate

Explanation#

Two app settings switch it on (they are true in new projects): ClientValidationEnabled and UnobtrusiveJavaScriptEnabled in Web.config.

Strongly typed helpers such as Html.TextBoxFor read the Data Annotations and emit data-val-* attributes: data-val-required="…", data-val-length-max="20", data-val-range-min="13".

jquery.validate.js and jquery.validate.unobtrusive.js (plus jQuery) read those attributes and validate as the user types and submits. Load them in the scripts section of forms that need them, usually through the ~/bundles/jqueryval bundle.

Html.ValidationMessageFor(m => m.Email) renders the span where a field’s message appears; Html.ValidationSummary() lists all errors at the top.

Client validation is only a convenience. Anyone can disable JavaScript or send a request with Postman, so the POST action must still check ModelState.IsValid.

Syntax#

1@Html.LabelFor(m => m.Email)
2@Html.TextBoxFor(m => m.Email)
3@Html.ValidationMessageFor(m => m.Email)
4

5@section scripts {
6    @Scripts.Render("~/bundles/jqueryval")
7}

Code example: The HTML that powers client-side validation#

1// Models/SubscribeViewModel.cs
2using System.ComponentModel.DataAnnotations;
3

4namespace ShopSite.Models
5{
6    public class SubscribeViewModel
7    {
8        [Required(ErrorMessage = "Email is required")]
9        [EmailAddress(ErrorMessage = "Enter a valid email")]
10        public string Email { get; set; }
11

12        [Range(13, 120, ErrorMessage = "Age must be 13 or over")]
13        public int Age { get; set; }
14    }
15}
16

17// Controllers/NewsletterController.cs
18using System.Web.Mvc;
19using ShopSite.Models;
20

21namespace ShopSite.Controllers
22{
23    public class NewsletterController : Controller
24    {
25        public ActionResult Subscribe() => View(new SubscribeViewModel { Age = 18 });
26    }
27}
28

29@* Views/Newsletter/Subscribe.cshtml *@
30@model SubscribeViewModel
31@using (Html.BeginForm())
32{
33    @Html.LabelFor(m => m.Email)
34    @Html.TextBoxFor(m => m.Email)
35    @Html.ValidationMessageFor(m => m.Email)
36

37    @Html.LabelFor(m => m.Age)
38    @Html.TextBoxFor(m => m.Age)
39    @Html.ValidationMessageFor(m => m.Age)
40

41    <button type="submit">Subscribe</button>
42}
43@section scripts {
44    <script src="~/Scripts/jquery-3.7.1.min.js"></script>
45    <script src="~/Scripts/jquery.validate.min.js"></script>
46    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
47}

GET /Newsletter/Subscribe
200 OK
<form action="/Newsletter/Subscribe" method="post"><label for="Email">Email</label><input data-val="true" data-val-email="Enter a valid email" data-val-required="Email is required" id="Email" name="Email" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span><label for="Age">Age</label><input data-val="true" data-val-number="The field Age must be a number." data-val-range="Age must be 13 or over" data-val-range-max="120" data-val-range-min="13" data-val-required="The Age field is required." id="Age" name="Age" type="text" value="18" /><span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span>    <button type="submit">Subscribe</button>
</form>
    <script src="/Scripts/jquery-3.7.1.min.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. TextBoxFor for Email adds data-val="true" plus one data-val-* attribute per rule: required and email, each with its message.
2. Age is an int, so MVC adds data-val-number (must be a number) and data-val-required automatically, plus the range rule with min and max.
3. ValidationMessageFor renders an empty span with data-valmsg-for; the unobtrusive script fills it with the message.
4. The ~/ in the script src is resolved to the app’s root, so it also works when the site runs in a virtual directory.
5. When the user leaves the Email box empty and tabs away, jQuery Validate shows “Email is required” without a round trip.

Real-world use case#

Common mistakes#

Best practices#

• Load the validation bundle only on pages with forms
• Always validate again on the server
• Use ValidationSummary(true) for model-level errors only
• Re-parse forms that are inserted with AJAX

Remember this#

Practice exercise#

1// Models/LoginViewModel.cs
2using System.ComponentModel.DataAnnotations;
3

4namespace ShopSite.Models
5{
6    public class LoginViewModel
7    {
8        [Required] public string UserName { get; set; }
9        [Required, DataType(DataType.Password)] public string Password { get; set; }
10    }
11}
12

13// Controllers/LoginController.cs
14using System.Web.Mvc;
15using ShopSite.Models;
16

17namespace ShopSite.Controllers
18{
19    public class LoginController : Controller
20    {
21        public ActionResult Index() => View(new LoginViewModel());
22    }
23}
24

25@* Views/Login/Index.cshtml *@
26@model LoginViewModel
27@using (Html.BeginForm())
28{
29    @Html.ValidationSummary(true)
30    @Html.TextBoxFor(m => m.UserName)
31    @Html.ValidationMessageFor(m => m.UserName)
32    @Html.PasswordFor(m => m.Password)
33    @Html.ValidationMessageFor(m => m.Password)
34}

GET /Login
200 OK
<form action="/Login" method="post"><input data-val="true" data-val-required="The UserName field is required." id="UserName" name="UserName" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span><input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" /><span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span></form>

Mini quiz#

Want more? Practise all ASP.NET MVC MCQs · ASP.NET MVC interview questions

Related topics#

My notes#

Saved in this browser.