jQuery検証通知にTwitter Bootstrapポップオーバーを使用する方法は？
bootstrap を使用してポップオーバーを簡単に表示でき、標準の jQuery検証プラグイン または jQuery検証エンジン を使用して検証を行うこともできますが、一方を他方にフィードする方法がわかりません。
必要なのは、通知を表示したいときにバリデーターによって呼び出され、メッセージとターゲット要素をポップオーバーに渡すクロージャーを与えるフックであると思います。これは一種の依存性注入のようです。
理論上はすべてニースですが、そのフックがどこにあるか、またはいずれかの検証エンジンにフックが存在するかどうかさえわかりません。これらは両方とも、配置、ラッパー、スタイルのすべての種類の精巧なオプションで通知を表示する責任を負うことに意図しているようです。エラータイプ（メッセージテキストは必ずしも必要ではありません）と関連する要素ですに。個々の通知ではなく、フォーム全体のフックを見つけました。
クラスを使用してルールを定義する検証システムは、動的に作成されたフォームでうまく機能するため、非常に気に入っています。
誰にも解決策やより良いアイデアがありますか？
highlightおよびshowErrorsjQuery Validatorオプション を見てください。これらにより、Bootstrapポップオーバーをトリガーする独自のカスタムエラーハイライトをフックできます。
これは実践的な例です。
$('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);
}
});
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");
});
}
});
次のようなものが得られます。
jsFiddle を確認してください。
クリス・フルストウはそれを正しかったが、それでも私にはしばらく時間がかかったので、ここに完全なコードがあります：
これにより、エラー時にポップオーバーが表示され、デフォルトのエラーラベルが非表示になります。
$('#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'も必要です。
これは機能しますが、選択を解除するとポップオーバーがちらつきます。それを修正する方法はありますか？
以下は、ポップアップが既に存在する場合でも、常に「表示」しようとする検証の「ちらつき」問題を防ぐ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'
});
このjQuery Validationプラグイン用のjQuery拡張機能（バージョン1.9.0でテスト済み）がトリックを行います。
これにより、一部のRails-eskエラーメッセージも追加されます。
ブートストラップの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;
}
これは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');
}});
どうもありがとうございました！ 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');
});
}
});
以下をご覧ください。
- 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');
});
}
});
上記のケニー・マイヤーの優れた答え の更新です。このスニペットで対処した、いくつかの問題が原因で機能しなくなりました。
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");
});
}
これは、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つの変更を加える必要があります（ここで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はハイライトの後に呼び出されるので、私は方法を見つけていません。
チェックアウト： https://github.com/mingliangfeng/jquery.validate.bootstrap.popover
JSの代わりにBootstrap popover cssを使用する方法を示します。 JSメソッドのポップアップにより、点滅の問題が発生します。
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");
}
});
}
});
このアイデアを投稿してくれた他のすべての人に感謝します。
元のポスターがbootstrapポップオーバーを表示/非表示にするフックを要求したため、これがディスカッションに関連するかどうかはわかりません。
私は簡単な検証を探していましたが、ポップオーバーは関係ありませんでした。 関連する投稿 であり、Google検索結果の最初のものが、この質問の重複として既にマークされています。したがって、この優れた@ReactiveRavenのjqValidation JSは、jqBootstrapValidationと呼ばれ、Twitter Bootstrapとうまく結びついています。セットアップには数分しかかかりません。ダウンロード こちら 。
これが価値を高めることを願っています。
ポップアップに上記のKenny Meyerコードを使用する場合、フィールドのコンテンツをチェックするが有効なURLなどの必須ではないルールにより、フィールドをクリアしてもポップアップが消えないことに注意してください。ソリューションについては、onkeyupを参照してください。誰かがより良い解決策を持っている場合は、投稿してください。
onkeyup: function(element, event) {
if($(element).valid()) {
return $(element).popover("hide");
}
}