Client Side Validation in a MVC 4 Application

Look at given the following points:

1. Open Visual Studio and seelct "File" -> "New" -> "Project...".

empty web application
Image 1

internet application
Image 2

2. After creating the application, go to the web.config file. Here you can see two keys already added to enable validation.

web config
Image 3

3. Now go to Model -> Add New Item -> Add New Class with the name Employee and do the following coding. Here we need to add using System.ComponentModel.DataAnnotations.

Namespace

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.ComponentModel.DataAnnotations;  
  6.   
  7. namespace ClientSideValidationInMVC.Models  
  8. {  
  9.     public class Employee  
  10.     {  
  11.         [Required (ErrorMessage="Name is Required")]   
  12.         public string Name { getset; }  
  13.   
  14.         [Required(ErrorMessage = "Email is Required")]  
  15.         [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +  
  16.                            @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +  
  17.                            @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",  
  18.                            ErrorMessage = "Email is not valid")]  
  19.         public string Email { getset; }  
  20.   
  21.         [Required(ErrorMessage = "Password is Required")]  
  22.         public string Password { getset; }  
  23.     }  
  24. }  
4. Now I will add a new Controller name as EmployeeRegFormController.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using ClientSideValidationInMVC.Models;  
  7.   
  8. namespace ClientSideValidationInMVC.Controllers  
  9. {  
  10.     public class EmployeeRegFormController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /EmployeeRegForm/  
  14.   
  15.         public ActionResult Index()  
  16.         {  
  17.             return View();  
  18.         }  
  19.   
  20.           [AcceptVerbs(HttpVerbs.Post)]  
  21.         public ActionResult Index(Employee model)  
  22.         {  
  23.             if (ModelState.IsValid)  
  24.             {  
  25.                 ViewBag.Name = model.Name;  
  26.                 ViewBag.Email = model.Email;  
  27.                 ViewBag.Password = model.Password;  
  28.             }  
  29.             return View(model);  
  30.         }  
  31.   
  32.     }  
  33. }  
5. Now right-click on Index and Add a View.

add view
Image 4

6. Open the view (Index.cshtml).
  1. @model ClientSideValidationInMVC.Models.Employee  
  2.   
  3. @{  
  4.     ViewBag.Title = "Employee Registration Form";  
  5. }  
  6. @if (ViewData.ModelState.IsValid)  
  7. {  
  8.     if (@ViewBag.Name != null)  
  9.     {  
  10.     <b><span style="font-family: Verdana; font-size: 10pt;">Name : @ViewBag.Name<br />  
  11.         Email : @ViewBag.Email<br />  
  12.         </span>  
  13.     </b>  
  14.     }  
  15. }  
  16. <br />  
  17. <br />  
  18.   
  19. @using (Html.BeginForm())  
  20. {  
  21.     @Html.ValidationSummary(true)   
  22.     <fieldset>  
  23.         <legend>Employee</legend>  
  24.         <div class="editor-label">  
  25.             @Html.LabelFor(model => model.Name)  
  26.         </div>  
  27.         <div class="editor-field">  
  28.             @Html.EditorFor(model => model.Name)  
  29.             @Html.ValidationMessageFor(model => model.Name)  
  30.         </div>  
  31.         <div class="editor-label">  
  32.             @Html.LabelFor(model => model.Email)  
  33.         </div>  
  34.         <div class="editor-field">  
  35.             @Html.EditorFor(model => model.Email)  
  36.             @Html.ValidationMessageFor(model => model.Email)  
  37.         </div>  
  38.   
  39.         <div class="editor-label">  
  40.             @Html.LabelFor(model => model.Password)  
  41.         </div>  
  42.         <div class="editor-field">  
  43.             @Html.PasswordFor(model => model.Password)  
  44.             @Html.ValidationMessageFor(model => model.Password)  
  45.         </div>  
  46.   
  47.   
  48.         <p>  
  49.             <input type="submit" value="Register" />  
  50.         </p>  
  51.     </fieldset>  
  52. }  
  53. @section Scripts {  
  54.     @Scripts.Render("~/bundles/jqueryval")  
  55. }  
7. Now run your application:

emp registration
Image 5

8. Type Name, Email and Password.

email not valid
Image 6

output
Image 7

 

Up Next
    Ebook Download
    View all
    Learn
    View all