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;
  7. namespace ClientSideValidationInMVC.Models
  8. {
  9. public class Employee
  10. {
  11. [Required (ErrorMessage="Name is Required")]
  12. public string Name { get; set; }
  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 { get; set; }
  21. [Required(ErrorMessage = "Password is Required")]
  22. public string Password { get; set; }
  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;
  8. namespace ClientSideValidationInMVC.Controllers
  9. {
  10. public class EmployeeRegFormController : Controller
  11. {
  12. //
  13. // GET: /EmployeeRegForm/
  15. public ActionResult Index()
  16. {
  17. return View();
  18. }
  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. }
  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
  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 />
  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>
  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>
  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