A Beginner’s Tutorial on Validating Model Data and Unobtrusive Client side Validation in ASP.NET MVC

In this article we will try to see how we can use DataAnnotationsto perform validations of Model classes in an ASP.NET MVC application. We will see how using simple script includes will provide us with the unobtrusive client side validations using the same DataAnnotationsattribute’s logic.

Background

Whenever we are creating database driven applications. validations of user input is a very important aspect. We need to validate all the data that is coming as user input to ensure that the data entered is valid and conforms to the data type and length values of the respective field in the database.

In a MVC application, The business entities are represented as Modelclasses. Now if we need to validate the values of these model classes before pushing the data into the database we have two options. First option is that we write all the client side scripts to validate the individual fields and also the server side code for validations before putting the data into the Model. Now this server side is little problematic if we have strongly typed views are strongly typed. It is not a good idea to validate all the fields’ data individually.

The second option is more elegant and is very much supported by the MVC framework. This option is to decorate the individual propertied with the DataAnnotationattributes. Now using these attributes we can specify various validation rules on individual fields of a Model class. This way we don’t have to write any extra validation code ourselves. Specifying these DataAnnotationattributes will take care of both server side and client side validations itself.

The DataAnnotationattributes rely on the fact that whenever we try to add new record or update an existing record, we will always check ModelState.IsValid property. This will use the specified values in the attributes of the Model and check for validation non conformance. In case the data is not valid, no action will be taken and the the user will be presented with the problems in the data.

Let us now see how we can put simple DataAnnotationattributes with a Modelclass and it will Take care of the client side and server side validations.

Using the code

Database and Validation Rules

Let is create a single table database. We will create a single table called as Contacts which will contain the information of a contact person.

DbTable

Now in this table, All the fields but ID are not-null i.e. they will be required from the user. Also, we have following length constraints on the individual fields.

  • FirstName: varchar(50)
  • LastName: varchar(50)
  • Address: varchar(100)
  • PhoneNumber: varchar(15)
  • eMail: varchar(35)

So another validation rule for this table should be that the data coming from the user should not exceed the maximum length of the individual fields. Another validation rule is that the phone number should only be numeric and should not contain the alphabets. And the email ID should be in the proper format.

So let us try to summarize the validation rules required for this table.

  1. All the fields are required.
  2. The length of user input should not exceed the length of respective fields.
  3. PhoneNumbershould contain only numbers.
  4. eMailshould be in the proper email format.

Now lets take these rules as the validation requirements for our application and start working on them.

Data Access

Now to perform data access we could use anything ranging from classic ADO.NET to ORMs like entity framework provided that we model our data in terms of Modelclasses. Let us use entity framework so that all the boilerplate code for data access and data entities will be generated for us.

Once we have ADO.NET Entity Data Model added for this database we will have the following entity created to be used as Model class in our application.

entity

Creating the MVC application

Let us now add a simple controller that will provide the CRUD operations on this table/entity. Lets use the scaffolds to generate the controller and views so that we can put our focus on data validations only rather than creating controllers and view.

scaffoldController

The Controllercode will now look like:

and the view created to perform the CRUD operations looks like

views

The Default Behavior

Now when we run the application we have the basic CRUD operations working for us. Now if we try to create a new entry and put some invalid data the data will be submitted there are no validations in place. Well not entirely true, entity framework is intelligent enough to detect the required fields and validate against them. So if we try to submit without any values we will get some error message. But these will be default messages generated by entity framework.

Now for the length, If we try to put the data that is of more length than an exception will be thrown. Now we can simple avert this exception if we could validate the incoming data and check for the length.

And finally, for phone number and email format, there is no way they are getting validated. As long as they are of valid length, they will simply be pushed into the database.

DataAnnotations

Now let us not depend on the default behavior and take control of the validation behavior in our hand. We will do this by adding DataAnnotationattributes in our Modelclass. Since our model class is auto generated will create a partial class with same name to add the data annotations on it.

Now this class is adorned with the MetadataTypeattribute which is present in DataAnnotationsnamespace. This indicated that the meta data for this Model class will be present in ContactMetaDataclass. So this ContactMetaDataclass will be the place to put in all our validation logic. Now this meta data class should contain same public properties as that of the Modelclass it is associated with.

Let us now take all the requirements one by one and try to put respective attributes with respective properties of the Model class.

All field are required

Now this can be achieved by putting the Requiredattribute with the properties as:

The length of user input should not exceed the length of respective fields

Now this can be done by specifying the StringLengthattribute with all the properties.

PhoneNumber and email Format

Now the next validation is for the phone number and email format. To do this let us try to use regular expressions. All the input will be validated against a regular expression which is specified as RegularExpressionattribute for the respective properties.

Note: We have not seen the use of Range attribute. It is used to specify range and its use is fairly straight forward.

Client Side Unobtrusive Validations

Now these attributes will take care of server side validations. To use the same from client side we need to include a couple of client side scripts and the same validation rules will work from client side too(providing immediate feedback to the user).

Testing the application

Now we have the validation rules for our entity in place. Let us now try to see this in action. Lets try to submit the form without putting any values.

requiredScreenshot

Now lets try to put long data in some field and the number and email ID in wrong format.

invalidData

But if all the data is valid the create operation will be successful with all the validations passed.

validScreenshot

And thus by putting DataAnnotationattributes in the Model'smetadata classes we have created both client side and server side validation for our Model classes.

Point of interest

In this article we saw how we can use DataAnnotationnamespace to decorate the Model'smeta data classes and perform server side and client side unobtrusive validations. This article has been written from a beginner’s perspective. I hope this has been informative.

Download sample code for this article: DataAnnotationsSample

One thought on “A Beginner’s Tutorial on Validating Model Data and Unobtrusive Client side Validation in ASP.NET MVC