30
MarCustom Validation for Checkbox in MVC Razor
05 Mar 2024
Intermediate
162K Views
2 min read
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.