1

Foundation でフォームをセットアップしようとしていますが、基本的なエラー チェック以上のことを行うのが難しいと感じています。次の入力フィールドがあるとします。

<input pattern="username" required type="text" placeholder="username" />

ユーザー名の正規表現が次のようなカスタム パターンであると仮定します。

^[A-Za-z]{3,6}$

私ができる必要があるのは、入力フィールドの文字列がその文字制限を上回っているか下回っているかに応じて、さまざまなエラーを表示することです。私が知る限り、Foundation Abide にはこれに関する問題があります。これが可能であることを示唆するドキュメントさえ見つかりません。

一方、私は同じアプリケーション内で AngularJS を利用でき、理論的には ng-min / ng-max ディレクティブを使用して、それに基づいてエラー ケースを切り替えることができます。しかし、私の理解では、Foundation と Angular は互いにうまく機能しないため、フレームワーク間の通信にいくつかの問題が発生する可能性があります。ビジネス要件では、可能な限り Foundation でこれを行う必要があると述べていますが、Foundation が適していない理由について良い事例を提供できれば、余裕があります。

Foundation で純粋に必要なことを行う方法はありますか? Angular と Foundation の検証を混在させるのは簡単ですか?それとも Angular の $digest サイクルで問題が発生するのでしょうか?

4

1 に答える 1

1

これは、Foundation を使用して実行できるはずです。Abide を使用すると、Foundation の初期化時に独自のカスタム検証関数を作成できます。そのバリデーターでは、DOM 操作を使用してエラー メッセージの内部テキストを調整できます。初期化は次のようになります。

$(document).foundation({
     abide: {
        validators: {
            myCustomValidator: function (el, required, parent) {
                if (el.value.length <= 3) {
                    document.getElementById('nameError').innerText = "Name must have more than 3 characters";
                    return false;
                } else if (el.value.length >= 9) {
                    document.getElementById('nameError').innerText = "Name must have less than 9 characters";
                    return false;
                } //other rules can go here
                return true;
            }
        }
    }
});

そして、このバリデーターをラベルで次のように使用できます。

 <form data-abide>
    <div class="name-field">
        <label>
            Email <small>required</small>
            <input type="text" data-abide-validator="myCustomValidator">
        </label>
        <small id="nameError" class="error">An email address is required.</small>
    </div>
    <button type="submit">Submit</button>
 </form>
于 2014-06-10T20:34:57.943 に答える