Please enable Javascript to correctly display the contents on Dot Net Tricks!

Custom Validation for Checkbox in MVC Razor

  Author : Shailendra Chauhan
Updated On : 23 Nov 2016
Total Views : 136,922   
Support : MVC3 & MVC4
 

This article will demonstrate, how to check whether checkbox is checked or not in Asp.Net MVC4 Razor application using custom server-side and client-side validation.

How to do it..

Follow the following steps for validating checkbox in mvc razor.

Step 1 : Making Custom Attribute

 public class RegistrationModel { 
[Required(ErrorMessage = "Please Enter Email Address")] 
[RegularExpression(".+@.+\\..+", ErrorMessage = "Please Enter Correct Email Address")] 
public string UserName { get; set; }
[Required(ErrorMessage = "Please Enter Address")] 
[Display(Name = "Address")] 
public string Address { get; set; }
 // Applying Custom Attribute 
[MustBeTrue(ErrorMessage = "Please Accept the Terms & Conditions")] 
public bool TermsAccepted { get; set; } }
 //Making Custom attribute for validating checkbox 
// IClientValidatable for client side Validation
public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable 
{ 
public override bool IsValid(object value) 
{ 
return value is bool && (bool)value; 
}
 // Implement IClientValidatable for client side Validation 
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
 {
 return new ModelClientValidationRule[] {
 new ModelClientValidationRule { ValidationType = "checkboxtrue", ErrorMessage = this.ErrorMessage } };
 } 
} 

Step 2: Making Custom Validation using jQuery

 @model Mvc4_Model_ServerSideValidation.Models.RegistrationModel
@{ 
ViewBag.Title = "Validating CheckBox";
}
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/jscript">
 //Custom jQuery validation unobtrusive script and adapters 
jQuery.validator.unobtrusive.adapters.add("checkboxtrue", function (options) 
{ 
if (options.element.tagName.toUpperCase() == "INPUT" && options.element.type.toUpperCase() == "CHECKBOX")
 {
 options.rules["required"] = true;
 if (options.message) {
 options.messages["required"] = options.message;
 }
 }
 }); </script>
<h2>Custom Validation for CheckBox </h2>
@using (Html.BeginForm())
{
 <fieldset> 
<legend>Custom Validation for Cascading Dropdown List</legend> 
<ol> 
<li> 
@Html.LabelFor(m => m.UserName) 
@Html.TextBoxFor(m => m.UserName, new { maxlength = 50 }) 
@Html.ValidationMessageFor(m => m.UserName) 
</li> 
<li> 
@Html.LabelFor(m => m.Address) 
@Html.TextAreaFor(m => m.Address, new { maxlength = 200 }) 
@Html.ValidationMessageFor(m => m.Address) 
</li> 
<li> 
@Html.CheckBoxFor(m => m.TermsAccepted)
@Html.ValidationMessageFor(m => m.TermsAccepted) 
</li> 
</ol> 
<input type="submit" value="Submit" /> 
</fieldset>
 } 

How it works..

Now, you have applied the custom validation to the checkbox. This validation works for client-side and server side.

What do you think?

I hope you will enjoy the tricks while programming with MVC Razor. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.


ABOUT AUTHOR

Shailendra Chauhan
Author, Architect, Corporate Trainer and Microsoft MVP

He is the author of some of most popular e-books which encompass technical Interview on Node.js Interview Questions and Answers, ASP.NET MVC Interview Questions and Answers, AngularJS Interview Questions and Answers and LINQ Interview Questions and AnswersKnow more...

YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
13 FEB
ASP.NET Core Development (online)

07:00 AM-09:00 AM IST( MON, WED, FRI)

Know More
25 JAN
Angular2 and Angular1 Development (online)

09:00 PM-10:30 PM IST(MON-FRI)

Know More
24 JAN
ASP.NET MVC with Angular2 Development (online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

Know More
20 JAN
NODEJS & MEAN Stack 2 Development (online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

Know More
15 JAN
PPC Marketing (offline)

04:00 PM-05:300 PM

14 JAN
Xamarin Forms : Build Cross-platform Apps (offline)

05:00 PM-06:30 PM IST

10 JAN
ASP.NET MVC with AngularJS Development (online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

3 JAN
ASP.NET MVC with AngularJS Development (online)

07:00 AM-09:00 AM IST

31 DEC
ASP.NET MVC with AngularJS Development (offline)

09:30 AM-11:00 AM

31 DEC
Angular2 and Angular1 Development (offline)

11:00 AM-12:30 AM

26 NOV
ASP.NET MVC with AngularJS Development (offline)

03:00 PM-04:30 PM

5 NOV
ASP.NET MVC with AngularJS Development (offline)

08:00 AM-09:30 AM

4 SEP
MEAN Stack 2 Development (offline)

11:00 AM-12:30 PM.

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+