Validation Using Data Annotations In ASP.NET MVC 5

Introduction:

In this article we will help fresher candidates to understand how to do perform validation using Data Annotation in ASP.NET MVC 5.



Objective of this article

1. Reduce the use of regular expression in ASP.NET MVC project.
2. Build application with proper error messages in minimum code.

Background

In old web form to do validations, developerS use regular expression, to display error message they use different types of strings & on button click event they write their login for validation on server side so it takes a lot of time to check validation.

In MVC architecture by using namespace System.ComponentModel.DataAnnotations; we can achieve validation in minimum code. To do validation using DataAnnotations techniques here are the steps,

Step 1:

Create a simple MVC application using VS 2013. Create one controller & give name to that controller. Write two action methods in above controller as one to take inputs from user & another to check validation on post method.

public ActionResult Index()
{
    return View();
}
public ActionResult GetData()
{
    return View("Index");
}

Step 2:

Create a model as follows. To achieve validation add namespace System.ComponentModel.DataAnnotations; in model. Now as per your project requirement you can achieve validation or you can also give mandatory fields with proper data type.

public class Employee
{
    [Required]
    [Display(Name = "Employee Id")]
    public int Id
    {
        get;
        set;
    }
    [Required]
    [Display(Name = "Employee Name")]
    public string Name
    {
        get;
        set;
    }
    [Required]
    [Display(Name = "Email Id")]
    [DataType(DataType.EmailAddress)]
    public string Email
    {
        get;
        set;
    }
    [Required]
    [Display(Name = "Phone Number")]
    [DataType(DataType.PhoneNumber)]
    public string Mobile
    {
        get;
        set;
    }
    [Required]
    [Display(Name = "Postal Code")]
    [DataType(DataType.PostalCode)]
    public int PostalCode {
        get;
        set;
    }
    [Required]
    [Display(Name = "Creation Date")]
    [DataType(DataType.Date)]
    public DateTime CreateDate
    {
        get;
        set;
    }
    [Required]
    [Display(Name = "Credit Card Details")]
    [DataType(DataType.CreditCard)]
    public string Address {
        get;
        set;
    }
    [Required]
    [Display(Name = "Password")]
    [DataType(DataType.Password)]
    public string Password {
        get;
        set;
    }
    [Required]
    [Display(Name = "URL")]
    [DataType(DataType.Url)]
    public string URL
    {
        get;
        set;
    }
}

Step 3:

Create view for above methods by simply right click on each action method.

For first view add model reference on top, some javascript files in Script folder & drag three files in the following sequence in first view after title tag as in the following,

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

Write logic to take input from user & validation summary message to show in view in body tag as follows,

<div>
    @Html.ValidationSummary() @using (Html.BeginForm("GetData","Home", FormMethod.Post)) { @Html.EditorForModel()
    <br />
    <input id="submit" type="submit" /> }
</div>

Step 4:

Now run our application & without entering any value click on submit button and you will see the following error messages.



Now enter valid values and then click submit.



Summary

This article will help fresher candidates to understand how to do validation using Data Annotation in ASP.NET MVC 5.

Hope you enjoyed this one.