Enable client side validation in ASP.NET MVC

Client-side validation is a process that verifies the user's input on the client's browser, reducing the load on the server. Here's a step-by-step guide to enable client-side validation in .NET MVC.

  1. First, create a new .NET MVC project and add a model to it. In this example, we will be using a simple model with three properties: Name, Age, and Email.
  2. Add the following code to the model:
using System;
using System.ComponentModel.DataAnnotations;

namespace ClientSideValidation.Models
    public class User
        public string Name { get; set; }
        [Range(18, 100)]
        public int Age { get; set; }
        public string Email { get; set; }
  1. In the Controller, create an action method to handle the form submission:
using System.Web.Mvc;
using ClientSideValidation.Models;

namespace ClientSideValidation.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            return View();
        public ActionResult Index(User user)
            if (ModelState.IsValid)
                //process the form
            return View(user);
  1. Next, create a view for the form. This can be done by right-clicking on the Index action method and selecting "Add View".
  2. Add the following code to the view:
@model ClientSideValidation.Models.User

@using (Html.BeginForm())

@Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Name)
@Html.LabelFor(m => m.Age) @Html.TextBoxFor(m => m.Age, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Age)
@Html.LabelFor(m => m.Email) @Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Email)
  1. Now, add the following code to the head section of the view to include the required client-side validation scripts:
    Note: You can also add these scripts in your "Views=>Shared=>_Layout.chtml" page in order to enable validation on all the pages.
    @section Scripts {
  1. Now, add the following two settings in the section of web.config, if they are not there:

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

1 + 4 =

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice