I recently had a question on getting checkbox validation working on the client side within a MVC project. This question was successfully answered, but raised another query.
I have no problem adding this code to an external javascript file, which i pilfered from This site
// Custom validator for checkboxs
jQuery.validator.unobtrusive.adapters.add("brequired", function (options) {
//bool-required for checkboxes
if (options.element.tagName.toUpperCase() == "INPUT" &&
options.element.type.toUpperCase() == "CHECKBOX")
{
options.rules["required"] = true;
if (options.message) {
options.messages["required"] = options.message;
}
}
});
Are you certain that you put your script AFTER the jquery scripts in your page? Mine is the last in the list.
Sniffer,
The more I look at this, the more I shake my head (at myself).
Upon further review, Darin's method will work, provided that you add one line to his page script:
<script type="text/javascript">
$.validator.unobtrusive.adapters.addBool("mustbetrue", "required");
$.validator.unobtrusive.parse();
</script>
Whenever you make a change (such as adding a new adapter), you must re-parse the unobtrusive validation attributes. Since the last action in jquery.validate.unobtrusive.js
is the parsing of the attributes, and the adapter is being added after the parsing, re-parsing solves this issue.
counsellorben
P.S. This solves your issue, but still leaves unresolved the issue of how to add other custom validators which do not use built-in methods from jquery.validate.js
without modifying jquery.validate.unobtrusive.js
.
P.P.S. I found the answer for adding custom validation methods. In order to add custom validation mmethods without modifying jquery.validate.unobtrusive.js
, you need to "borrow" some of its code to add to your page script. Adding a custom method then looks like the following:
<script type="text/javascript">
var $jQval = $.validator,
adapters,
data_validation = "unobtrusiveValidation";
function setValidationValues(options, ruleName, value) {
options.rules[ruleName] = value;
if (options.message) {
options.messages[ruleName] = options.message;
}
}
$jQval.addMethod("mustbetrue", function (value, element, param) {
// check if dependency is met
if (!this.depend(param, element))
return "dependency-mismatch";
return element.checked;
});
$.validator.unobtrusive.adapters.add("mustbetrue", function (options) {
setValidationValues(options, "mustbetrue", true);
});
$jQval.unobtrusive.parse();
</script>
Unobtrusive validation is giving me nothing but grief.
In a very very simple test page, this works:
$(document).ready(function () {
jQuery.validator.unobtrusive.adapters.add(
'mustbetrue', ['properties'], function (options) {
options.rules['mustbetrue'] = options.params;
options.messages['mustbetrue'] = options.message;
}
);
jQuery.validator.addMethod('mustbetrue', function (value, element, params) {
// check if dependency is met
if (!this.depend(param, element)) {
return "dependency-mismatch";
}
switch (element.type) {
case "checkbox":
return element.checked;
break;
case "hidden":
return (value == 'true' || value == 'True');
break;
default:
alert('type = ' + element.type);
return true;
break;
}
});
});
However, when I move this code to my more complex form, suddenly it stops working and I have no idea why and no time to delve into the unobtrusive code to try and find out.
counsellorben's solution works in my more complex form.
If anyone can point me to a site that explains in detail how to properly add a custom validator to unobtrusive validation, I will be forever greatful. Each site I visit has a different solution.