Click here to Skip to main content
Click here to Skip to main content

ASP.NET MVC Client Side Validation

, 2 Oct 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
This article explains how to implement client-side validation in an ASP.NET MVC application.

Introduction

This article explains how to implement client-side validation in an ASP.NET MVC application. The validation implemented using jQuery and jQuery validation plug-in (jquery.validate.min.js and jquery.validate.unobtrusive.min.js).

In the server-side validation (ASP.NET MVC Server-Side Validation),the page must be submitted via a postback to be validated on the server and if the model data is not valid then the server sends a response back to the client. With client-side validation, the input data is checked as soon as they are submitted, so there is no postback to the server and there is no page refresh.

Using the Code

When you are developing an MVC application in Visual Studio 2012 then the client-side becomes enabled by default, but you can easily enable or disable the writing of the following app setting code snippet in the web.config file.

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

The jQuery validation plug-in takes advantage of the Data Annotation attributes defined in the model, which means that you need to do very little to start using it. Let's create an Employee model (Employee.cs class file under the Models folder) that has two properties with Data annotation attributes.

using System.ComponentModel.DataAnnotations;
namespace ClientValidation.Models
{
    public class Employee
    {
        [Required(ErrorMessage = "Name is Requirde")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Email is Requirde")]
        [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +
                            @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +
                            @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",
                            ErrorMessage = "Email is not valid")]
        public string Email { get; set; }
    }
}

After that you need to create the controller's action methods. These render views on the UI and bind a model with the view. So let's create a controller with two action methods that handle both request types (GET and POST respectively).

using System.Web.Mvc;
using ClientValidation.Models; 
namespace ClientValidation.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        } 
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index(Employee model)
        {
            if (ModelState.IsValid)
            {
                ViewBag.Name = model.Name;
                ViewBag.Email = model.Email;
            }
            return View(model);
        }
    }
}

Thereafter create a strong view that the input field binds with the model and create a JavaScript function that uses the HTML Helper extension method FieldIdFor() to get the Id of the input field and shows the input field's value in an alert message.

Add New View Screen

Figure 1.1 : Add New View Screen

Here I checked "Reference script libraries," which means Visual Studio adds these references automatically. Visual Studio adds the following code snippet to the bottom of the view.

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryval")
}

Now click on the "Add" button and the view is created as in the following code snippet:

@model ClientValidation.Models.Employee
@{
    ViewBag.Title = "Index";
}
 @if (ViewData.ModelState.IsValid)
    {
        if(@ViewBag.Name != null)
        {
            
                Name : @ViewBag.Name
                Email : @ViewBag.Email
            
        }
    } 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true) 
    <fieldset>
        <legend>Employee</legend> 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div> 
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div> 
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryval")
}

Output of Application

Let's run the application and test the following scenario.

  1. When all fields are empty:

    Validation Message when both fields are empty

    Figure 1.2: Validation Message when both fields are empty
  2. When the Name field is empty but Email is not valid:

    Validation Message when Email is not valid

    Figure 1.3 : Validation Message when Email is not valid
  3. When both fields are valid:

    All fields are valid

    Figure 1.4 All fields are valid

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sandeep Singh Shekhawat
Software Developer
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralGood & Simple PinmemberSlavimir Vesic17-Feb-15 22:04 
GeneralRe: Good & Simple PinmvpSandeep Singh Shekhawat18-Feb-15 2:22 
Questionbundle not existant PinmemberMember 103744989-Dec-14 10:22 
AnswerRe: bundle not existant PinmemberMatt U.13-Mar-15 7:09 
GeneralGood One PinmemberShemeemsha RA24-Sep-14 23:54 
QuestionClient Side Validation PinmemberMd Kamal Azhar10-Jul-14 20:21 
AnswerRe: Client Side Validation PinprofessionalSandeep Singh Shekhawat10-Jul-14 20:39 
QuestionValidation PinmemberNithyaGopu31-Mar-14 21:34 
AnswerRe: Validation PinprofessionalSandeep Singh Shekhawat31-Mar-14 21:41 
GeneralMy vote of 5 PinprofessionalMihai MOGA14-Feb-14 18:11 
GeneralRe: My vote of 5 PinprofessionalSandeep Singh Shekhawat30-Aug-14 20:07 
GeneralMy vote of 5 PinprofessionalRenju Vinod10-Feb-14 18:22 
GeneralRe: My vote of 5 PinprofessionalSandeep Singh Shekhawat10-Feb-14 19:49 
GeneralAwesome Pinmemberjjlangatjose3-Feb-14 20:40 
GeneralRe: Awesome PinprofessionalSandeep Singh Shekhawat3-Feb-14 20:45 
GeneralMy vote of 4 PinmemberPranay Rana3-Feb-14 2:41 
GeneralRe: My vote of 4 PinprofessionalSandeep Singh Shekhawat3-Feb-14 2:44 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun29-Jan-14 19:13 
GeneralRe: My vote of 5 PinprofessionalSandeep Singh Shekhawat31-Jan-14 16:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 2 Oct 2014
Article Copyright 2014 by Sandeep Singh Shekhawat
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid