Jquery validation plugin remove rules

Introduction of jquery validation plugin

This article is the continuation of my previous jquery validation plugin article Unlike my previous article "Jquery validation plugin rules" here i am trying to remove the data annotation validation dynamically from jquery validation plugin.

Approach for using jquery validation plugin rules

After solving the issues of validate method in my project (explained that issue in this jquery validation plugin post ) i have added the data annotation validations, created a models etc.

Now lets see how we can remove the validations dynamically using jquery validation plugin in my MVC project -

Lets create a new MVC Project from Web template.

First we will create a model which we are going to use across the project -

public class Category
{
 [Required]
 public int CategoryID { get; set; }
 [Required]
 public string CategoryName { get; set; }
}

As you can see in the above code snippet, "Category" model is added with properties - "CategoryID" and "CategoryName" which are required. So basically in page when the user does not enter these values then error message - "Please Enter Category ID or Please Enter Category Name" will be displayed.

Now lets create a controls for these fields -

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "frmCategory" }))

{

 <div class="row">

  <div>

   <label class="label_txt">@Html.LabelFor(m => m.CategoryID)</label>

   @Html.TextBoxFor(m => m.CategoryID)

  </div>

  <div class="error_align_left align_left_processor">

   @Html.ValidationMessageFor(m => m.CategoryID)

  </div>

 </div>



 <div class="row">

  <div>

   <label class="label_txt">@Html.LabelFor(m => m.CategoryName)</label>

   @Html.TextBoxFor(m => m.CategoryName)

  </div>

  <div class="error_align_left align_left_processor">

   @Html.ValidationMessageFor(m => m.CategoryName)

  </div>

 </div>



 <input type="button" class="saveCategory" value="Save" id="saveCategory" />

}

As you can see above, I am using  type="button" and not type="submit" because in the click event of the button control i will submit the form using jquery. Below is the complete code of Jquery file -

$(document).ready(function () {
 
 $("#saveCategory").click(function () {
  
  if ($("#frmCategory").valid())
   $("#frmCategory").submit();
 }); 
 
});

As you see in the above code we are just validating the form controls. As we discussed earliar, if the user has not entered the value in any of the textboxes, required error will be thrown. So after executing the above code we will get error like this in the screenshot -



Now we will try to remove the validation for "Category Name" field and if we enter the value in field "Category ID" the form becomes valid. Let us change the code to remove the validation for "Categoty Name" -

$(document).ready(function () {

 $("#saveCategory").click(function () {

  $("#CategoryName").rules("remove");

  if ($("#frmCategory").valid())
   $("#frmCategory").submit();
 }); 
 
});

So after adding this code validation for "Category Name" field will be disabled. See the below screenshot of the screen as how it looks when "Save" button is clicked -


Once enter value for "Category ID" field, the form will be valid and it submits the form and below is the screenshot of post method, which is called after form submit -



So null value will be passed to "Category Name" field and the entered value - 5 goes to "Category ID" field.

I hope this article has helped you guys. Please comment your thoughts below.