overide global Validation Bindings validationOptions for specific input

Question

I have the standard validation options applied on script initialisation:

ko.validation.configure({
        insertMessages: false,
        decorateInputElement: true,
        errorClass: 'has-error',
        errorElementClass: 'has-error'
    });

This is working perfectly, however I have a user acceptance checkbox that makes sense to have the alert alert-danger classes applied when the view model is invalid.

I have tried applying the following and overriding the global validation options with ones that apply locally to the container (as per Validation Bindings wiki):

<div data-bind="validationOptions: { decorateInputElement: true, errorClass: 'koErrorElement', errorelementclass: 'koErrorElement' }">
    <div class="checkbox" data-bind="validationElement: hasAgreedToTerms">
        <label>
            <input type="checkbox" data-bind="checked: hasAgreedToTerms" /> I agree to terms and conditions
        </label>
    </div>
</div>

But this doesn't work, it only applies the original has-error class (that is set during init) and applies it to the checkbox element (whereas i want it wrapped on the containing div.checkbox element. The output I would expect to be produced would be the following html:

<div class="checkbox koErrorElement">
    <label>
        <input type="checkbox" /> I agree to terms and conditions
    </label>
</div>

Any idea what i am doing wrong and why the error classes are not applied?

Answer 1

According the the configuration's documentation the correct property name is errorElementClass and not errorelementclass as you have it in your code.

So you just need to use the correct casing of the option errorElementClass:

<div data-bind="validationOptions: { decorateInputElement: true, 
                                     errorElementClass: 'koErrorElement' }">
    <div class="checkbox" data-bind="validationElement: hasAgreedToTerms">
        <label>
            <input type="checkbox" data-bind="checked: hasAgreedToTerms" /> 
            I agree to terms and conditions
        </label>
    </div>
</div>