23
NovCustom Validation for Checkbox in MVC Razor
Checkboxes: An Overview
Checkboxes are used in a Razor Pages form to ensure users select zero or more predefined options. Checkboxes are nothing but a type of input element, and some aspects of their behavior are unique and need to be understood when deciding whether, and how to use them. In this MVC Tutorial, we will explore more about Custom Validation for Checkbox in MVC Razor. Consider our ASP.NET MVC Course for a better understanding of all MVC core concepts.
How to do it.
Follow the following steps to validate the 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 the client side and server side.