MVC 3 Custom ValidationAttribute for CheckBoxFor firing twice on client
I'm going to lay out the code to explain the whole situation then pose the description of the problem:
In my View Model I have a boolean property to track whether the user has accepted terms:
[MustBeTrue(ErrorMessageResourceType = typeof(ErrorMessages), ErrorMessageResourceName = "MustAccept")]
public bool HasAuthorizedBanking { get; set; }
As you can see I've created a custom validation attribute to handle this called MustBeTrue to handle the Checkbox, since [Required] is currently not working for client-side validation on Checkboxes in MVC 3
public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable
{
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
if ((bool)value)
return ValidationResult.Success;
return new ValidationResult(String.Format(ErrorMessageString,validationContext.DisplayName));
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule
{
ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
ValidationType = "truerequired"
};
yield return rule;
}
}
Then I add a CheckBoxFor with a ValidationMessage to my View:
@Html.CheckBoxFor(model => model.HasAuthorizedBanking)
@Html.ValidationMessageFor(model => model.HasAuthorizedBanking, "", new { @class = "validationtext" })
In order to implement this client-side I created a jQuery validator method, and added an unobtrusive adapter:
// Checkbox Validation
jQuery.validator.addMethod("checkrequired", function (value, element) {
var checked = false;
checked = $(element).is(':checked');
return checked;
}, '');
jQuery.validator.unobtrusive.adapters.addBool("truerequired", "checkrequired");
In my view all the steps in the signup process are on one page, the elements are hidden and shown via jQuery and validated using jQuery Validation. When the 'Next' button is clicked each input element on the page is triggered for validation:
var validator = $("#WizardForm").validate(); // obtain validator
var anyError = false;
$step.find("input").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false;
Notes:
The problem: When the checkbox is checked/unchecked the 'checkrequired' method is fired once. However, when the 'Next' button is clicked and we set off to validate all the input elements, it is fired twice whether or not the checkbox is checked. Interestingly, if it is checked, the first validation returns true and the second returns false (this second false return is my main problem - the page will not validate and it will not allow you to continue to the next step). Additionally, when it is checked and Next is clicked - the ValidationMessageFor message disappears as though it is valid.
Edit: I have another Custom Attribute for validating Age in a jQuery DatePicker textbox, and while it is implemented this exact same way - it only fires once under the same conditions.
It turns out the issue is that a second input element with the same name as the checkbox was being generated by Html.CheckBoxFor, as described here: http://forums.asp.net/t/1314753.aspx
<input data-val="true" data-val-required="The HasAuthorizedBanking field is required." data-val-truerequired="You must accept to continue." id="bankingtermscheckbox" name="HasAuthorizedBanking" type="checkbox" value="true" />
<input name="HasAuthorizedBanking" type="hidden" value="false" />
The fix was to change the jQuery selector to only look at input elements whose type is not hidden:
$step.find(':input:not(:hidden)').each(function () { // Select all input elements except those that are hidden
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
if (anyError)
return false; // exit if any error found