Perform Validation on Form Using Data Annotation in MVC4 Web API

This article explains the Data Annotation property for doing validation.

Introduction

This article explains the Data Annotation property for doing validation. Here we create a simple form for displaying the validation using Data Annotation. We know that validation is very important for any form.

Use the following procedure to create a simple form.

Step 1

Create a Web API Application as in the following:

  • Start Visual Studio 2013.
  • From the Start Window select "New Project".
  • Select "Installed" -> "Templates" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET MVC4 Web Application".

Select MVC4 Web Application

  • Click on the "OK" button.
  • From the MVC4 project window select "Web API".

Select Web API

  • Click on the "Create Project" button.

Step 2

Add a Model Class as in the following:

  • In the "Solution Explorer".
  • Right-click on the Model Folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select "Class".

Add Model Class

  • Click on the "Add" button.

Add the following code:

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

 

namespace ValidationData.Models

{

    public class UserModel

    {

        [Required(ErrorMessage = "Enter User Name")]

        public string FirstName { getset; }

        [Required(ErrorMessage = "Enter User Last Name")]

        public string LastName { getset; }

        [Required(ErrorMessage = "Enter USer Address")]

        public string Address { getset; }

        [Required(ErrorMessage = "Enter User Age")]

        [Range(18, 50, ErrorMessage = "Age Sholud more the 18 and Less Than 50")]

        public int Age { getset; }

    }

}

Step 3

Add a Controller:

  • In the "Solution Explorer".
  • Right-click on the Controller folder, select "Add" -> "Controller".
  • From the Template select "MVC Controller".

Add Controller

  • Click on the "Add" button.

Add the following Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using ValidationData.Models;

namespace ValidationData.Controllers

{

    public class UsersController : Controller

    {

        //

        // GET: /Users/

 

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Detail(UserModel u)

        {

            if(!ModelState.IsValid)

            {

                return View("Index");

            }

            else

            {

                return Content("Valid User" + "FirstName" + u.FirstName + "LastName" + u.LastName + "Address" + u.Address + "Age" + u.Age);

            }

        }

 

    }

}

 

Step 4

Add a View:

  • In the "EmployeeController".
  • Right-click on the "Index" action Method.
  • Select "Add View."

Select Add View

  • After the Add View dialog box has been opened select "Strongly Typed View" and select "Model class".

Select View setting

  • Click on the "Add" button.

Add the following code:

@model ValidationData.Models.UserModel

 

@{

    Layout = null;

}

<!DOCTYPE html> 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>

       @using (Html.BeginForm("Detail","Users",FormMethod.Post))

       {

           @Html.ValidationSummary(true)

           <p>

               @Html.LabelFor(m=>m.FirstName)

               @Html.TextBoxFor(m=>m.FirstName)

               @Html.ValidationMessageFor(m=>m.FirstName)

           </p>

           <p>

               @Html.LabelFor(m=>m.LastName)

               @Html.TextBoxFor(m=>m.LastName)

               @Html.ValidationMessageFor(m=>m.LastName)

           </p>

           <p>

               @Html.LabelFor(m=>m.Address)

               @Html.TextBoxFor(m=>m.Address)

               @Html.ValidationMessageFor(m=>m.Address)

           </p>

           <p>

               @Html.LabelFor(m=>m.Age)

               @Html.TextBoxFor(m=>m.Age)

               @Html.ValidationMessageFor(m=>m.Age)

           </p>

           <input type="submit" value="Submit"/>

       }

    </div>

</body>

</html>

 

Step 5

Execute the application and change the URL to "http://localhost:5016/Users/Index".

Display Form

Leave the TextBoxes of FirstName and Address empty and enter an age less then 18. Then it displays the following validation message.

Display Validation Message