Make Client Side and Server Side Validation with MVC Razor 4.0

MVC Razor Validations

In any programming, we have used three types of validation. Each validation has its own importance.

Background

We have used client side validation to filter initially filter the value in client side without passing them to server. This will save a round trip. But sometimes, a hacker will disable client side value by disabling client side script(generally JavaScript and jquery). Then we used server side validation. This is much secure validation than client side, but this will affect the application performance. The third one is database validation. This validation is not performed alone because once someone will reach to our database, our database must be hacked by someone or will affect the database.

In MVC Razor, we have used both types of validations, i.e., client side validation and server side validation. The third one is used while we have designed the database.

Validation in MVC Razor

In MVC Razor, we have used both client side validation and server side validation.

Client Side Validation

In MVC client side, validation is done with the help of JavaScript and JQuery. These JavaScript and Jquery come in built with MVC razor. We will just customize them to call that jQuery or JavaScript method with our control.

Server Side Validation

This validation is done with the help of Data Annotations.

Using the Code

Use namespace in model class:

using System.ComponentModel.DataAnnotations;
 
 public class Student 
    {
        [Required(ErrorMessage = "Please Enter StudentID")]
        [RegularExpression(".+@.+\\..+", 
			ErrorMessage = "Please Enter Correct Email Address")]
        public string StudentID { get; set; }
 
        [Required(ErrorMessage = "Please Enter student Name")]
        public string Student { get; set; }
 
        [Required(ErrorMessage = "Please Enter Password")]
        public string Password { get; set; }
 
        [Required(ErrorMessage = "Please Enter Confirm Password")]
        [Compare("Password", ErrorMessage = "Confirm Password doesn't matched")]
        public string ConfrimPassword { get; set; }
         [Required(ErrorMessage = "Please Enter Address")]
        public string Address { get; set; } 
    } 

In view, we used this code:

<h2>Index</h2>
 
@using (Html.BeginForm("Index", "Home"))
{
    <div>StudentID</div>
    <div>
        @Html.TextBoxFor(m => m.StudentID)
        @Html.ValidationMessageFor(m => m.StudentID)
    </div>
    <div>Full Name</div>
    <div>
        @Html.TextBoxFor(m => m.Student)
        @Html.ValidationMessageFor(m => m.Student)
    </div>
    <div>Password</div>
    <div>
        @Html.PasswordFor(m => m.Password, new { value = ViewBag.Password })
        @Html.ValidationMessageFor(m => m.Password)
    </div>
    <div>Confirm Password</div>
    <div>
        @Html.PasswordFor(m => m.ConfrimPassword, new { value = ViewBag.Password })
        @Html.ValidationMessageFor(m => m.ConfrimPassword)
    </div>
    <div>Country</div>
    
    <div>Address</div>
    <div>
        @Html.TextAreaFor(m => m.Address)
        @Html.ValidationMessageFor(m => m.Address)
    </div>
    
    <input type="submit" value="Save" />
}