0

チェックボックスのグループを持つフォーム フィールドがあり、フォームを送信するには多くのチェックボックスの少なくとも 1 つを選択する必要があります。

これを実現するために YUI3 ルールを使用するにはどうすればよいですか?

どうもありがとう、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>
4

1 に答える 1

0

aui-form-validatorのソースを見ると、mixの使用は解決策へのアプローチ方法を示しています。

gallery-checkboxgroups簡単にするために、特にCheckboxGroupallUncheckedが関数にアクセスできるようにするための の使用法も含めました。

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}
                        }
                    }
            );

        }
);

フィドル

デフォルトのエラー メッセージを上書きするには

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

デフォルトでは、フォームバリデーターが検証onBlurを行い、すべてのチェックボックスが同じ を共有しているためname、エラーメッセージはそれぞれ最後の「失敗した」検証フィールドに移動します。この問題に対処するには、グループの上に隠しフィールドを配置し、ルール<input name='errorMessageAnchor' hidden/>を置き換えることでエラーをそのフィールドに関連付けます。cbName

errorMessageAnchor:{custom:true, atLeastOneCheckbox:true}
于 2014-08-14T14:48:22.300 に答える