web-dev-qa-db-ja.com

jQuery検証通知にTwitter Bootstrapポップオーバーを使用する方法は？

bootstrap を使用してポップオーバーを簡単に表示でき、標準の jQuery検証プラグイン または jQuery検証エンジン を使用して検証を行うこともできますが、一方を他方にフィー​​ドする方法がわかりません。

必要なのは、通知を表示したいときにバリデーターによって呼び出され、メッセージとターゲット要素をポップオーバーに渡すクロージャーを与えるフックであると思います。これは一種の依存性注入のようです。

理論上はすべてニースですが、そのフックがどこにあるか、またはいずれかの検証エンジンにフックが存在するかどうかさえわかりません。これらは両方とも、配置、ラッパー、スタイルのすべての種類の精巧なオプションで通知を表示する責任を負うことに意図しているようです。エラータイプ（メッセージテキストは必ずしも必要ではありません）と関連する要素ですに。個々の通知ではなく、フォーム全体のフックを見つけました。

クラスを使用してルールを定義する検証システムは、動的に作成されたフォームでうまく機能するため、非常に気に入っています。

誰にも解決策やより良いアイデアがありますか？

jqueryvalidationtwitter-bootstrappopover
84
Synchro

highlightおよびshowErrorsjQuery Validatorオプション を見てください。これらにより、Bootstrapポップオーバーをトリガーする独自のカスタムエラーハイライトをフックできます。

21
Chris Fulstow

これは実践的な例です。

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

enter image description here

bootstrapポップオーバーは実際には使用しませんが、見た目はとても素晴らしく、簡単に実現できます。

UPDATE

したがって、ポップオーバー検証を行うには、次のコードを使用できます。

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      return $(value).popover("hide");
    });
    return $.each(errorList, function(index, value) {
      var _popover;
      _popover = $(value.element).popover({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

次のようなものが得られます。

enter image description here

jsFiddle を確認してください。

80
Kenny Meyer

クリス・フルストウはそれを正しかったが、それでも私にはしばらく時間がかかったので、ここに完全なコードがあります：

これにより、エラー時にポップオーバーが表示され、デフォルトのエラーラベルが非表示になります。

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

これにより、ポップオーバーが設定されます。あなたがこれから必要とする唯一のものはトリガーです：「マニュアル」

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

ポップオーバーに渡されたタイトルおよびコンテンツ属性は機能していなかったため、＃password入力でdata-content = 'Minimum 5 characters'およびdata-original-title = 'Invalid Password'でインラインで指定しました。フォームにrel = 'popover'も必要です。

これは機能しますが、選択を解除するとポップオーバーがちらつきます。それを修正する方法はありますか？

9
Varun Singh

以下は、ポップアップが既に存在する場合でも、常に「表示」しようとする検証の「ちらつき」問題を防ぐVarun Singhからの素晴らしい提案へのフォローアップです。エラー状態の配列を追加して、エラーを表示している要素と表示していない要素をキャプチャしました。チャームのように機能します！

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});
6
Jeffrey Gilbert

このjQuery Validationプラグイン用のjQuery拡張機能（バージョン1.9.0でテスト済み）がトリックを行います。

https://github.com/tonycoco/Rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js

これにより、一部のRails-eskエラーメッセージも追加されます。

5
tonycoco

ブートストラップのCSSを変更することを好みます。 jQuery validateのクラスを適切な場所に追加したところです。フィールド検証エラーおよび入力検証エラー

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}
3
Alberto Chvaicer

これはBootstrap 2.xおよびjQuery Validate 1.9で行った方法です。

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});
3
Jamie R Rytlewski

どうもありがとうございました！ Bootstrap用のバージョンですが、ツールチップ付きです。私の意見では、ポップオーバーよりもエレガントです。質問はポップオーバー向けであることがわかっているので、この理由で投票しないでください。たぶん誰かがこのようにそれを好きになるでしょう。何かを探しているときに大好きで、Stackoverflowで新しいアイデアを見つけました。注：フォームにマークアップは必要ありません。

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


            $.each(errorList, function (index, value) {

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    });
3
Adrian P.

以下をご覧ください。
- https://Gist.github.com/303098
最も簡単だと思います。

編集

リンクからのコード：

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('popover').options.content = value.message;

            $(value.element).popover('show');

        });

    }

});
3
Codemator

上記のケニー・マイヤーの優れた答え の更新です。このスニペットで対処した、いくつかの問題が原因で機能しなくなりました。

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }
2
tofirius

これは、Twitter Bootstrapガイドラインに準拠するために検証に入れたものです。エラー検証メッセージは<span class=help-inline>に入れられ、外部コンテナをerrorまたはsuccessとして強調表示します。

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}
2
namin

これは私がそれを実現した方法です。ただし、検証スクリプトに2つの変更を加える必要があります（ここでbootstrap 1.4のコードを取得し、変更しました- http://mihirchitnis.net/2012/01/customizing-error- messages-using-jquery-validate-plugin-for-Twitter-bootstrap / ）

検証するための私の呼び出し：

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

次に、jquery.validate.jsで2つのことを変更する必要があります
1。この修正を適用する- https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2。行647の後（showLabel関数で、ラベル部分を作成）.addClass(this.settings.errorClass)行の後：行を追加：.addClass("help-inline")
誰かがvalidate関数で2番目の修正を適用する方法を見つけることができるかもしれませんが、showLabelはハイライトの後に呼び出されるので、私は方法を見つけていません。

2
Andrej Bergant

チェックアウト： https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

JSの代わりにBootstrap popover cssを使用する方法を示します。 JSメソッドのポップアップにより、点滅の問題が発生します。

1
Andrew Feng

tl; drハッシュマップを使用して要素のIDを保存し、その場でポップオーバーを作成することにより、明示的なポップオーバーを列挙する必要がなくなります（マッシュアップJeffrey GilbertとKenny Meyerのアプローチ）。

これは他の人が言及したちらつきの問題を修正する私のテイクですが、@ Jeffrey Gilbertの答えとは異なり、リスト（errorStates）を使用せず、むしろエラーmap。ハッシュマップFTW。私はCSのすべての問題がハッシュマップで解決できることをどこかで読んだことを覚えていると思う:)

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = element.popover({
          trigger: "manual",
                 placement: "top",
                 content: value.message,
                 template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
        });
        _popover.data("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

このアイデアを投稿してくれた他のすべての人に感謝します。

1
g33kz0r

元のポスターがbootstrapポップオーバーを表示/非表示にするフックを要求したため、これがディスカッションに関連するかどうかはわかりません。

私は簡単な検証を探していましたが、ポップオーバーは関係ありませんでした。 関連する投稿 であり、Google検索結果の最初のものが、この質問の重複として既にマークされています。したがって、この優れた@ReactiveRavenのjqValidation JSは、jqBootstrapValidationと呼ばれ、Twitter Bootstrapとうまく結びついています。セットアップには数分しかかかりません。ダウンロード こちら 。

これが価値を高めることを願っています。

1
uchamp

ポップアップに上記のKenny Meyerコードを使用する場合、フィールドのコンテンツをチェックするが有効なURLなどの必須ではないルールにより、フィールドをクリアしてもポップアップが消えないことに注意してください。ソリューションについては、onkeyupを参照してください。誰かがより良い解決策を持っている場合は、投稿してください。

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }
0
monsoon