MVC Adding methods into jquery.validate.unobtrusive.js

Question

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.

In order for my checkbox validation to work I needed to add the following bits of javascript directly into jquery.validate.unobtrusive.js:

$jQval.addMethod("mustbetrue", function (value, element, param) {
    // check if dependency is met
    if (!this.depend(param, element))
        return "dependency-mismatch";
    return element.checked;
});

adapters.add("mustbetrue", function (options) {
    setValidationValues(options, "mustbetrue", true);
});

this worked great, but I'm unhappy about having to change this file just in case Microsoft or the validation plugin boys update the file in the future. If I'm not still working on the project this file may be overwritten without people realising it's been customised.

So with that in mind I tried adding this into an external javascript file:

$.validator.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);
});

Unfortunately now the client side script on my checkboxes doesn't run. Can anyone see what I'm doing wrong?

Thanks in advance

S

Answer 1

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>

Answer 2

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.

Answer 3

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.