Post
Ask Question

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.

    Specify Required Field Validation

  2. Specify Range Validation: When field value is between particular range we can use range validation and can be used in the following way.

    Specify Range Validation
  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,

    Specify Max length

  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,

    Specify compare Validation

  5. Specify Regular expression for validation: We can specify regular expression for validation in the following way,

    Specify Regular expression for validation

  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.

web config

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

  1. <script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery-1.10.2.js ")"></script>  
  2. <script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery.unobtrusive-ajax.min.js ")"></script>  
  3. <script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery.validate.min.js ")"></script>  
  4. <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.
  1. .field - validation - error  
  2. {  
  3.     color: #ff0000;  
  4. }  
  5.   
  6. .field - validation - valid  
  7. {  
  8.     display: none;  
  9. }  
  10.   
  11. .input - validation - error  
  12. {  
  13.     border: 1 px solid# ff0000;  
  14.     background - color: #ffeeee;  
  15. }  
  16.   
  17. .validation - summary - errors  
  18. {  
  19.     font - weight: bold;  
  20.     color: #ff0000;  
  21. }  
  22.   
  23. .validation - summary - valid  
  24. {  
  25.     display: none;  
  26. }  
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.

VALIDATION

The following is my page:

mypage
My View Model Code
  1. public class StudentDetailViewModel  
  2. {  
  3.     [Required(ErrorMessage = "Id is Required")]  
  4.     public int Id  
  5.     {  
  6.         get;  
  7.         set;  
  8.     }  
  9.   
  10.     [Required(ErrorMessage = "Name is Requirde")]  
  11.     [StringLength(20, ErrorMessage = "Max Length of Name is 20 charecters")]  
  12.     public string Name  
  13.     {  
  14.         get;  
  15.         set;  
  16.     }  
  17.   
  18.     [Required(ErrorMessage = "Class is Required")]  
  19.     public string Class  
  20.     {  
  21.         get;  
  22.         set;  
  23.     }  
  24.   
  25.     [Required(ErrorMessage = "Section is Required")]  
  26.     public string Section  
  27.     {  
  28.         get;  
  29.         set;  
  30.     }  
  31.   
  32.     [Required(ErrorMessage = "Address is Required")]  
  33.     public string Address  
  34.     {  
  35.         get;  
  36.         set;  
  37.     }  
  38.   
  39.     [Required(ErrorMessage = "Email is Required")]  
  40.     [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" + @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +@  
  41.         ".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",  
  42.         ErrorMessage = "Please give valid email address")]  
  43.     public string Email  
  44.     {  
  45.         get;  
  46.         set;  
  47.     }  
  48.   
  49.     [Required(ErrorMessage = "Percentage is Required")]  
  50.     [Range(1, 100, ErrorMessage = "Percentile must be between 1 to 100")]  
  51.     public int Percentage  
  52.     {  
  53.         get;  
  54.         set;  
  55.     }  
  56.   
  57. }  
And my page code:
  1. @  
  2. model DropdownGrid.Models.StudentDetailsModel  
  3.   
  4. @  
  5. {  
  6.     ViewBag.Title = "Index";  
  7. }  
  8.   
  9. < h2 > Index < /h2> 
  10. < script type = "text/javascript"  
  11.    src = "@Url.Content("~/Scripts/jquery - 1.10.2. js ")" > < /script> < script type = "text/javascript"  
  12.    src = "@Url.Content("~/Scripts/jquery.unobtrusive - ajax.min.js ")" > < /script> < script type = "text/javascript"  
  13.    src = "@Url.Content("~/Scripts/jquery.validate.min.js ")" > < /script> < script type = "text/javascript"  
  14.    src = "@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js ")" > 
  15. < /script>
  16. @Styles.Render("~/Content/css")  
  17.   
  18. < br >  
  19.     < br >  
  20.     < br >  
  21.     < br >  
  22.   
  23.   < fieldset >  
  24.     < div id = "dvCategoryResults" > 
  25.       @  
  26.        {  
  27.            Html.RenderPartial("_PartialStudent", Model);  
  28.        } 
  29.       < /div>
  30.  < /fieldset>  
  31.   
  32. < fieldset > @using(Ajax.BeginForm("CreateStudent", "GetStudents",  
  33.     new AjaxOptions  
  34.     {  
  35.         HttpMethod = "Post", UpdateTargetId = "dvCategoryResults"  
  36.     }))  
  37. {  
  38.     
  39.     < table >  
  40.         < tr >  
  41.         < td > @Html.LabelFor(M => M.SelectedStudent.Id) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Id)@ Html.ValidationMessageFor(M => M.SelectedStudent.Id) < td >  
  42.         < /tr> < tr >  
  43.         < td > @Html.LabelFor(M => M.SelectedStudent.Name) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Name)@ Html.ValidationMessageFor(M => M.SelectedStudent.Name) < td >  
  44.         < /tr> < tr >  
  45.         < td > @Html.LabelFor(M => M.SelectedStudent.Address) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Address)@ Html.ValidationMessageFor(M => M.SelectedStudent.Address) < td >  
  46.         < /tr> < tr >  
  47.         < td > @Html.LabelFor(M => M.SelectedStudent.Class) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Class)@ Html.ValidationMessageFor(M => M.SelectedStudent.Class) < td >  
  48.         < /tr> < tr >  
  49.         < td > @Html.LabelFor(M => M.SelectedStudent.Section) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Section)@ Html.ValidationMessageFor(M => M.SelectedStudent.Section) < td >  
  50.         < /tr> < tr >  
  51.         < td > @Html.LabelFor(M => M.SelectedStudent.Email) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Email)@ Html.ValidationMessageFor(M => M.SelectedStudent.Email) < td >  
  52.         < /tr> < tr >  
  53.         < td > @Html.LabelFor(M => M.SelectedStudent.Percentage) < /td> < td > @Html.TextBoxFor(M => M.SelectedStudent.Percentage)@ Html.ValidationMessageFor(M => M.SelectedStudent.Percentage) < td >  
  54.         < /tr>  
  55.   
  56.     < /table> < input type = "submit"  
  57.     value = "Submit" / >  
  58. } < /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. 


Similar Articles