How do I validate a group of checkboxes with YUI3 AlloyUI?

Question

I have a form field with a group of checkboxes and at least one of the many checkboxes must be selected in order to submit the form.

How do I use YUI3 rules to make this happen?

Many thanks, S

rules: {
    fname: {
        required: true,
    },
    email: {
        required: true,
        email: true
    },
    tel: {
        required: true,
        digits: true,
    },
    dob: {
        date: true,
    },
},
fieldContainer: '.form__item',
containerErrorClass: 'form__item--error',

HTML:

<fieldset class="form__item form__item--group">
    <legend class="form__item__label">
        A group of checkboxes
        <div class="form__item__label__instructions">
            Select one of them.
        </div>
    </legend>

    <input name='errorMessageAnchor' hidden/>

    <label class="form__item__label" for="cb1">
        <input id="cb1" name="cbName" type="checkbox" class="checkbox" /> One
    </label>
    <label class="form__item__label" for="cb2">
        <input id="cb2" name="cbName" type="checkbox" class="checkbox" /> Two
    </label>
    <label class="form__item__label" for="cb3">
        <input id="cb3" name="cbName" type="checkbox" class="checkbox" /> Three
    </label>
    <label class="form__item__label" for="cb4">
        <input id="cb4" name="cbName" type="checkbox" class="checkbox" /> Four
    </label>
</fieldset>

Does it have to be using `rules` or are you asking how to validate a checkbox group in general? — Origineil, Aug 13 '14 at 19:29
I am using AlloyUI YUI3 *'aui-form-validator'* script to validate my form. I want to use the script or extend the scripts rules in order to make at least one of the checkboxes in a particular form field required. — scottgemmell, Aug 14 '14 at 07:36

score 0 · Accepted Answer · answered Aug 14 '14 at 14:48

Looking at the source for aui-form-validator, the use of mix indicates how to approach a solution.

For simplicity, I've also included a usage of gallery-checkboxgroups, specifically for CheckboxGroup to have access to allUnchecked function.

HTML

<form id="myForm">
 <div class="control-group">

    <div>
        <h5>Checkbox Group (requries at least 1 selection)</h5>

        Checkbox 1<input type='checkbox' class='checkbox' name='cbName'/><br/> 
        Checkbox 2<input type='checkbox' class='checkbox' name='cbName'/><br/>
        Checkbox 3<input type='checkbox' class='checkbox' name='cbName'/> 
    </div>
</div>
<input class="btn btn-info" type="button" value="Submit"/>

JS

YUI().use('aui-form-validator', 
          'gallery-checkboxgroups',
           function(Y) {

             var group = new Y.CheckboxGroup(Y.all('.checkbox'))

             var CONFIG = Y.config.FormValidator;
             Y.mix(CONFIG.RULES, {atLeastOneCheckbox: function(val, fieldNode, ruleValue) {
                    return !group.allUnchecked()
                }});

             var validator = new Y.FormValidator(
                    {
                        boundingBox: '#myForm',
                        rules: {
                            cbName:{custom:true, atLeastOneCheckbox:true}
                        }
                    }
            );

        }
);

Fiddle

To override the default error message

 Y.mix(CONFIG.STRINGS,{atLeastOneCheckbox:"Pick at least 1"});

By default the form validator is going to validate onBlur and since all the checkboxes share the same name, the error message will move around respectively to the last "failed" validation field. To address this issue, place a hidden field <input name='errorMessageAnchor' hidden/> above the group, and associate the error with that field by replacing cbName in the rules

errorMessageAnchor:{custom:true, atLeastOneCheckbox:true}

This is excellent, many thanks. I am having issues placing the error message where i want though. I will add the HTML I am working with. — scottgemmell, Aug 15 '14 at 08:21
I am hoping to get the error to appear at the bottom of my form field in the plugins error container `stackErrorContainer: '
',` — scottgemmell, Aug 15 '14 at 10:00
You should be able to put the hidden input within the `div`. — Origineil, Aug 15 '14 at 12:20

How do I validate a group of checkboxes with YUI3 AlloyUI?

1 Answers1

Fiddle