2

チェックボックスのセットを遵守するためのバリデーターを作成したいと思います。

5 つのチェックボックスのセットを考えてみましょう。ユーザーは、最大 3 つ、少なくとも 1 つをチェックするよう求められます。

だから、ここに私の進行中のコードがあります：

<div data-abide-validator='checkboxes' data-abide-validator-values='1,3'>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
</div>

<script>
    $(document).foundation({
        validators: {
            checkboxes: function(el, required, parent) {
                var countC = el.find(':checked').length;
                alert(countC);
            }
        }
    });
</script>

この時点で、チェックされた入力を数えようとします。しかし、バリデーターをトリガーすることさえできないようです...トリガーする方法を理解できれば、検証をコーディングすることができたと思います。

実際、カスタムバリデーターの例はあまり見つかりませんでしたし、公式ドキュメントもあまり役に立ちませんでした。

4

1 に答える 1

8

あなたの HTML マークアップは、順守するには本当に「正しく」ありません。data-abide-validator親divではなく、属性を入力に添付する必要があります。さらに、abide のデフォルトのエラー表示が機能するように、より適切なマークアップが必要です (また、それをレイアウトするために Foundation のグリッド システムをより適切に使用する必要があります)。フォーム マークアップの例については、Zurb のサイトのAbide Validation Pageを参照してください。

自由にマークアップを再構築して、基本レイアウトになりつつあるものにしました。

<form action="/echo/html/" method="POST" data-abide>
    <div class="row">
        <div class="small-12 columns checkbox-group" data-abide-validator-limit="1,3">
            <label>Check some boxes</label>
            <small class="error">You have checked an invalid number of boxes.</small>
            <ul class="small-block-grid-3">
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="1" /> 1
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="2" /> 2
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="3" /> 3
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="4" /> 4
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="5" /> 5
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="small-12 columns">
            <button type="submit">Submit</button>
        </div>
    </div>
</form>

あなたのJSコードに関して。それも正しくありません。バリデーターだけでなく、オプションの abide -> バリデーター名前空間に対処する必要があります。私はあなたの JS コードを書き直して、それを行うだけでなく、あなたが望む効果を与えるようにしました:

$(document).foundation({
    abide: {
        validators: {
            checkbox_limit: function(el, required, parent) {
                var group = parent.closest( '.checkbox-group' );
                var limit = group.attr('data-abide-validator-limit').split(',');
                var countC = group.find(':checked').length;
                if( countC >= limit[0] && countC <= limit[1] ) {
                    group.find('small.error').hide();
                    //return true so abide can clear any invalid flags on this element
                    return true;
                } else {
                    group.find('small.error').css({display:'block'});
                    //return false and let abide do its thing to make sure the form doesn't submit
                    return false;
                }
            }
        }
    }
});

カスタム検証を行うときに隣接する要素をチェックするには、対象とするものが必要です。検証関数のel変数は、検証される入力/フィールドの DOM 要素になります。変数はrequired、フィールドが必須かどうか (ブール値) としてフラグが立てられているかどうかを示します。parent変数はフィールドの「親」に設定されます。labelタグは技術的にはinput要素の親ですが、abide はラベルがフィールドの要素構造の一部であることを認識し、代わりにそれを要素にスキップするほどスマートであるため、「親」と言いliます。

そこから、共通の親を識別する方法が必要です。checkbox-groupそのため、グループ内のすべてのチェックボックスの「親」にすることにした要素にクラスを追加しました。これは Foundation や Abide の「マジック」クラスではなく、検証機能で使用するために私自身が作成したものです。

そこから、検証関数の数行を簡単にたどってワークフローを確認できます。グループ コンテナー オブジェクトを見つけ、コンテナーのdata-abide-validator-limits属性の制限を解析し、コンテナー内のチェックされた入力の数を数え、チェックされた数が間にあるかどうかをチェックします。制限、エラーメッセージの表示/非表示、および true/false を返すため、フィールドが検証されたかどうかを順守することができます。

あなたが自分でそれをチェックしたいなら、私はそれの動作するフィドルを持っています;）これがあなたにとって有益であることを願っています.Foundationである素晴らしいもので遊んで最高の幸運を祈っています.

于 2014-09-14T00:24:26.147 に答える