Understanding Validation In MVC - Part 1

Types of Validation:

1. Client Side Validation: Performed at client side no post back.
2. Server side Validation: Performed at server side post back.

Now let’s see Client side Validation:

1. Specify Required Field Validation: It is commonly used validation. When we want to specify particular field is compulsory in UI we can use this validation. Simply we need to just apply [Required] attribute to the Property. We can give custom error message. The following image show how to use it.
   
   
   
   
2. Specify Range Validation: When field value is between particular range we can use range validation and can be used in the following way.
   
   
   
3. Specify Max length: When user want max length of property, it should be between specified limit and we can specify length to the String as in the following,
   
   
   
   
4. Specify compare Validation: We can compare two properties using this validation. Just need to specify which property must be matched using the following way,
   
   
   
   
5. Specify Regular expression for validation: We can specify regular expression for validation in the following way,
   
   
   
   
6. Custom Validation: We will see this in next validation article.

Let’s see how to implement validation in your project

Now to implement validation in your project you have to follow these steps:

Step 1: Enable client side validation in web config through the following way. It is true by default.



Step 2: Include scripts files in the page. Do not change sequence.

<script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery-1.10.2.js ")"></script>
<script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery.unobtrusive-ajax.min.js ")"></script>
<script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery.validate.min.js ")"></script>
<script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery.validate.unobtrusive.min.js ")"></script>

Step 3: Include CSS for your page. This will help you to display the error message in red color.

.field - validation - error
{
    color: #ff0000;
}

.field - validation - valid
{
    display: none;
}

.input - validation - error
{
    border: 1 px solid# ff0000;
    background - color: #ffeeee;
}

.validation - summary - errors
{
    font - weight: bold;
    color: #ff0000;
}

.validation - summary - valid
{
    display: none;
}

Step 4: Specify the HTML helper element for property which you need to apply the validation.

@Html.ValidationMessageFor is the helper element for validation and you need to pass the property expression for it.



The following is my page:


My View Model Code

public class StudentDetailViewModel
{
    [Required(ErrorMessage = "Id is Required")]
    public int Id
    {
        get;
        set;
    }

    [Required(ErrorMessage = "Name is Requirde")]
    [StringLength(20, ErrorMessage = "Max Length of Name is 20 charecters")]
    public string Name
    {
        get;
        set;
    }

    [Required(ErrorMessage = "Class is Required")]
    public string Class
    {
        get;
        set;
    }

    [Required(ErrorMessage = "Section is Required")]
    public string Section
    {
        get;
        set;
    }

    [Required(ErrorMessage = "Address is Required")]
    public string Address
    {
        get;
        set;
    }

    [Required(ErrorMessage = "Email is Required")]
    [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" + @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +@
        ".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",
        ErrorMessage = "Please give valid email address")]
    public string Email
    {
        get;
        set;
    }

    [Required(ErrorMessage = "Percentage is Required")]
    [Range(1, 100, ErrorMessage = "Percentile must be between 1 to 100")]
    public int Percentage
    {
        get;
        set;
    }

}

And my page code:

@
model DropdownGrid.Models.StudentDetailsModel

@
{
    ViewBag.Title = "Index";
}

< h2 > Index < /h2>
< script type = "text/javascript"
   src = "@Url.Content("~/Scripts/jquery - 1.10.2. js ")" > < /script> < script type = "text/javascript"
   src = "@Url.Content("~/Scripts/jquery.unobtrusive - ajax.min.js ")" > < /script> < script type = "text/javascript"
   src = "@Url.Content("~/Scripts/jquery.validate.min.js ")" > < /script> < script type = "text/javascript"
   src = "@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js ")" >
< /script>
@Styles.Render("~/Content/css")

< br >
    < br >
    < br >
    < br >

  < fieldset >
    < div id = "dvCategoryResults" >
      @
       {
           Html.RenderPartial("_PartialStudent", Model);
       }
      < /div>
 < /fieldset>

< fieldset > @using(Ajax.BeginForm("CreateStudent", "GetStudents",
    new AjaxOptions
    {
        HttpMethod = "Post", UpdateTargetId = "dvCategoryResults"
    }))
{

    < table >
        < tr >
        < td > @Html.LabelFor(M => M.SelectedStudent.Id) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Id)@ Html.ValidationMessageFor(M => M.SelectedStudent.Id) < td >
        < /tr> < tr >
        < td > @Html.LabelFor(M => M.SelectedStudent.Name) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Name)@ Html.ValidationMessageFor(M => M.SelectedStudent.Name) < td >
        < /tr> < tr >
        < td > @Html.LabelFor(M => M.SelectedStudent.Address) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Address)@ Html.ValidationMessageFor(M => M.SelectedStudent.Address) < td >
        < /tr> < tr >
        < td > @Html.LabelFor(M => M.SelectedStudent.Class) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Class)@ Html.ValidationMessageFor(M => M.SelectedStudent.Class) < td >
        < /tr> < tr >
        < td > @Html.LabelFor(M => M.SelectedStudent.Section) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Section)@ Html.ValidationMessageFor(M => M.SelectedStudent.Section) < td >
        < /tr> < tr >
        < td > @Html.LabelFor(M => M.SelectedStudent.Email) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Email)@ Html.ValidationMessageFor(M => M.SelectedStudent.Email) < td >
        < /tr> < tr >
        < td > @Html.LabelFor(M => M.SelectedStudent.Percentage) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Percentage)@ Html.ValidationMessageFor(M => M.SelectedStudent.Percentage) < td >
        < /tr>

    < /table> < input type = "submit"
    value = "Submit" / >
} < /fieldset>

Please go through the project attached, which will help you to understand more.

I hope you understood how validations can be performed in MVC. In next article we will see rest of the things in validation such as Server side Validation, Custom Validation and Validation Summary.