ASP.NET MVC client side validation using data annotations

ASP.NET MVC client side validation using data annotations

Introduction:

In this tutorial i am going to explain about ASP.NET MVC client side validation using data annotations. In my previous tutorial i have explained about Convert numbers to words (123 into one two three) in c#.netSort Dictionary Based On Value In Asp.Net And C#.Net | Convert Dictionary into KeyValuePair or KeyValuePair into Dictionary. and Convert String To Upper,Lower & Title(Proper) Case in ASP.Net C#.Net & VB.Net Using TextInfo Class.

Implementation :

Now we will see the implementation of ASP.NET MVC client side validation using data annotations. Before proceeding further please make sure you read the below tutorials on doing crud operations in asp.net mvc using entity framework.

  1. CRUD operations using Entity Framework Database First Approach and MVC 4
  2. CRUD operations using Entity Framework Code First Approach and MVC 4

Data Annotation:

Now lets see what is data annotation before we proceed the implementation of ASP.NET MVC client side validation using data annotations.

Data Annotations are attributes used to implement the model validation  using some predefined attributes. We can write our own custom attribute if needed. Some of the frequently used data annotations are

Required – This annotation is used to force the property as mandatory

Range – This annotation is used with int property to specify the minimum and maximum acceptable value,

MinLength – This attribute is used to specify the minimum length of the attribute

MaxLength – This attribute is used to specify the maximum acceptable length of the attribute

RegularExpression – This attribute uses the regular expression to validate the user input.

There are many annotations are there. Here we have used few annotations to explain how client side validations are achieved in asp.net mvc using data annotations.

Employee Class with Data Annotation:

I have created a new project and named it as MVCValidation. And in the model folder i have added the Employee class with the required data annotations. Below is the complete code of employee class

Please remember to use data annotations you need to import System.ComponentModel.DataAnnotations namespace within your code.

Adding Controller And View:

Now add the empty controller and name it as EmployeeController. And add the action method for Create operation. The employee controller will look like below.

Now we need to add the view for create action method. Right click on create action method and choose Add View option from the options menu.

Step 1 of ASP.NET MVC client side validation using data annotations

Choose Create template and for model class select Employee model so that the auto generated code will generate the error messages for properties based on the data annotations we specified in the model and click next. Check the above image for reference.

It will generate the below code.

You can see the validation message are generated for properties based on the data annotation.

Output:

Now if you run the program you can see the output of ASP.NET MVC client side validation using data annotations .

First the page will look like the below screenshot.

Output -1 of ASP.NET MVC client side validation using data annotations

Now if you start entering the value you can see either the error message disappear or the different error message. Now in our case when i enter the name with less than 5 characters i am getting minimum length error. Similarly for age and salary i am getting different errors like shown below.

Output 2 of ASP.NET MVC client side validation using data annotations

Now if you enter the correct values you will see the error free form like in the below image.

Output 3 of ASP.NET MVC client side validation using data annotations

Conclusion:

It is time to conclude this tutorial.  Do you like this tutorial? Help us to improve. Please post your comments and feedback below.

Leave a Reply

Your email address will not be published. Required fields are marked *