Home/ Questions/Q 3932290
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T23:26:29+00:00

I want my Agree To Terms checkbox to be mandatory using jQuery validate, in

  • 0

I want my “Agree To Terms” checkbox to be mandatory using jQuery validate, in an MVC3 project. I currently get server/client DRY/SPOT validation from “MS data annotation attributes” + “MS MVC3 unobtrusive jQuery validation”.

Here’s a stand-alone test (plain HTML generated by MVC3). Why doesn’t it work, please? When run, validation ensures the “Contact Name” field is filled, but doesn’t care about the state of the checkbox.

<!DOCTYPE html>

<html>
<head>
    <title>RequiredCheckbox</title>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            // http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
            $.validator.unobtrusive.adapters.add("mandatory", function (options) {
                    options.rules["required"] = true;
                    if (options.message) {
                        options.messages["required"] = options.message;
                    }
                }
            });
            $.validator.unobtrusive.parse(document);
        });
    </script>

</head>

<body>
    <div>
        <form>
            <input data-val="true" data-val-mandatory="The field Terms Are Accepted is invalid." id="isTermsAccepted" name="isTermsAccepted" type="checkbox" value="true" />
            <input name="isTermsAccepted" type="hidden" value="false" />
            <span class="field-validation-valid" data-valmsg-for="isTermsAccepted" data-valmsg-replace="true"></span>

            <input data-val="true" data-val-required="The Contact Name field is required." id="contactName" name="contactName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="contactName" data-valmsg-replace="true"></span>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

The rest of this post is just my research notes.

Setting data annotation attribute [required] doesn’t help:
http://forums.89.biz/forums/MVC+3+Unobtrusive+validation+does+not+work+with+checkboxes+(jquery+validation)+and+the+fix+for+it.

That’s fine. What “required” means for a checkbox is obviously a holy war I don’t want to wade into, where MS thought they knew better than the jquery team. Coercing it locally should be a simple matter of:
$("form").validate({ rules: { cbAgreeToTerms: "required" } });

…right? no, because of:
http://blog.waynebrantley.com/2011/01/mvc3-breaks-any-manual-use-of-jquery.html
http://pinoytech.org/question/4824071/microsofts-jquery-validate-unobtrusive-makes-other-validators-skip-validation

WHAT? That’s pretty stinking cheezy! (IMHO, of course.)

Now, I’ve tried this solution:
http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
and it didn’t work for me. This author’s dangling comments and somewhat cargo-cult use of the inverted CHECKBOX test from earlier in his/her article make me wonder if it actually works for him/her, then what other voodoo was involved?

Note I think that the last snippet of JS is equivalent to the cleaner:
$.validator.unobtrusive.adapters.addBool("brequired", "required");
That was suggested by the last post in:
http://forums.asp.net/p/1648319/4281140.aspx#4281140
But notice that author comments that he hadn’t debugged it yet. It didn’t work for me, and reading between the lines, I think he means it didn’t work for him?

The unobtrusive.js calls parse on docready, so I tried calling that, but it didn’t help me.
$.validator.unobtrusive.parse(document);
I’ve also found a few similar articles and none talk about requiring initialization of any sort. Maybe they are all locally editing the original/public unobtrusive.js? I’d rather not if I can help it, isn’t that what the adapters are for?

I found stack-overflow articles, much the same, as well as more complex examples:
ASP .Net MVC 3 unobtrusive custom client validation
Perform client side validation for custom attribute
http://xhalent.wordpress.com/2011/01/27/custom-unobstrusive-jquery-validation-in-asp-net-mvc-3/
But I don’t see anything there that is different than what I’ve already tried.

Is this really working for people? Why can’t I get it to work for me?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just change your javascript to this:

    (function ($) {
    // http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
    $.validator.unobtrusive.adapters.add("mandatory", function (options) {
        options.rules["required"] = true;
        if (options.message) {
            options.messages["required"] = options.message;
        }                
    });            
} (jQuery));

    You do not actually need to write your own adapter though and can just use:

    (function ($) {
    $.validator.unobtrusive.adapters.addBool("mandatory", "required");
} (jQuery));
    • 0