JQuery doğrulama bildirimleri için Twitter Bootstrap açılır pencereleri nasıl kullanılır?

Açılır pencerelerin bootstrap kullanarak yeterince kolayca görünmesini sağlayabilirim ve standart jQuery doğrulama eklentisini veya jQuery doğrulama motorunu kullanarak da doğrulamalar yapabilirim, ancak birini diğerine nasıl besleyeceğimi bulamıyorum.

Sanırım ihtiyacım olan şey, onaylayıcı tarafından bir bildirim görüntülemek istediğinde çağrılan, mesajı ve hedef öğeyi bir açılır pencereye geçiren bir kapatma vermesi. Bu bir tür bağımlılık enjeksiyonu gibi görünüyor.

Teoride hepsi güzel, ancak bu kancanın nerede olduğunu veya herhangi bir doğrulama motorunda var olup olmadığını anlayamıyorum. Her ikisi de, tüm aradığım hata türleri (hatta mesaj metnine bile ihtiyacım yok) ve ilgili öğe olduğunda, yerleştirme, sarmalayıcılar, stiller için her türlü ayrıntılı seçenekle bildirimleri görüntüleme sorumluluğunu üstlenmeye niyetli görünüyorlar. için. Formun tamamı için kancalar buldum, bireysel bildirimler değil.

Dinamik olarak oluşturulmuş formlarla güzelce oynadıkları için, kuralları tanımlamak için sınıfları kullanan doğrulama sistemlerini daha çok tercih ederim.

Çözümü veya daha iyi bir fikri olan var mı?

highlightVe showErrors jQuery Validator seçeneklerine bir göz atın , bunlar Bootstrap açılır pencerelerini tetikleyen kendi özel hata vurgularınızı bağlamanıza izin verir.

Bu uygulamalı bir örnek:

$('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); 
    }
});

Önyükleme açılır pencerelerini gerçekten kullanmıyor, ancak gerçekten güzel görünüyor ve elde edilmesi kolay.

GÜNCELLEME

Dolayısıyla, popover doğrulamasına sahip olmak için şu kodu kullanabilirsiniz:

$("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");
    });
  }
});

Bunun gibi bir şey alırsınız:

JsFiddle'a göz atın .

Chris Fulstow haklıydı, ama yine de biraz zaman aldı, bu yüzden kodun tamamı burada:

Bu, hata durumunda açılır pencereyi gösterir ve varsayılan hata etiketlerini gizler:

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

Bu açılır bilgi penceresini oluşturur. Bundan ihtiyacınız olan tek şey tetikleyicidir: 'manuel'

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

Popover'a aktarılan başlık ve içerik öznitelikleri çalışmıyordu, bu yüzden bunları #password girişimde data-content = 'Minimum 5 karakter' ve data-original-title = 'Geçersiz Şifre' ile satır içi olarak belirttim. Ayrıca formunuzda rel = 'popover'a da ihtiyacınız var.

Bu çalışır, ancak açılır bilgi penceresi seçim kaldırıldığında titrer. Bunu nasıl düzelteceğine dair bir fikrin var mı?

İşte Varun Singh'in, pop-up zaten mevcut olmasına rağmen sürekli olarak "göstermeye" çalışan doğrulamanın "titreme" sorununu önleyen mükemmel önerisinin bir devamı. Hangi öğelerin hata gösterip hangilerinin olmadığını yakalamak için bir hata durum dizisi ekledim. Tıkır tıkır çalışıyor!

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 Doğrulama Eklentisi için bu jQuery uzantısı (1.9.0 sürümüyle test edilmiştir) işinizi görecektir.

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

Bu ayrıca bazı Rails-esk hata mesajlarına da ekler.

Bootstrap'in CSS'sini değiştirmeyi tercih ediyorum. JQuery validate sınıflarını doğru yerde ekledim. alan doğrulama hatası ve girdi doğrulama hatası

    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 ve jQuery Validate 1.9 ile bunu böyle yaptım

$('#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');
    }});

Lütfen şunlara bir göz atın:
- https://gist.github.com/3030983
Bence bu en basit olanı.

DÜZENLE

Bağlantıdaki kod:

$('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');

        });

    }

});

Uyarılar için çok teşekkürler! İşte Bootstrap için sürümüm, ancak Araç İpuçları ile. Bence popovers'dan daha zarif. Sorunun popovers için olduğunu biliyorum, bu yüzden lütfen bu nedenle oy vermeyin. Belki birileri bu şekilde hoşuna gider. Bir şey aradığımı seviyorum ve Stackoverflow'da yeni fikirler buldum. Not: form üzerinde işaretlemeye gerek yoktur.

    $('#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');

            });

        }

    }); 

Ben böyle yaptım. Ancak doğrulama betiğinde 2 değişiklik yapmayı içerir (bootstrap 1.4 kodunu burada aldım ve sonra değiştirdim - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- twitter-bootstrap için / )

Doğrulama çağrım:

    $("#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);
    }
  }
});

Daha sonra jquery.validate.js'de 2 şeyi değiştirmeniz gerekir
1. bu düzeltmeyi uygulayın - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. Satır 647'den sonra (showLabel işlevinde, etiket bölümünü oluşturun ) satırdan sonra satır .addClass(this.settings.errorClass)ekle: .addClass("help-inline")
Birisi doğrulama işlevinde ikinci düzeltmeyi uygulamanın bir yolunu bulabilir, ancak showLabel vurgulamanın ardından çağrıldığı için bir yol bulamadım.

Twitter Önyükleme yönergelerine uymak için doğrulamama koyduğum şey bu. Hata doğrulama mesajı bir içine yerleştirilir <span class=help-inline>ve dış kabı errorveya olarak vurgulamak istiyoruz 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');
}

İşte Kenny Meyer'in yukarıdaki mükemmel cevabına bir güncelleme . Benim için çalışmasını engelleyen birkaç sorun vardı, bunları bu kod parçacığında ele aldım:

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

Bunun tartışmayla ilgili olup olmadığından emin değilim çünkü orijinal poster kancaların önyükleme açılır pencerelerini göstermesini / gizlemesini istedi.

Basit bir doğrulama arıyordum ve popovers önemli değildi. Bir İlgili sonrası ve google arama sonuçlarında ilk zaten bu sorunun yinelenen işaretlendi. Bu nedenle, Twitter Bootstrap ile iyi bir şekilde evlenen bu mükemmel @ ReactiveRaven'ın jqValidation JS'si jqBootstrapValidation olarak adlandırılır. Kurulum yalnızca birkaç dakika sürer. Buradan indirin .

Umarım bu değer katar.

tl; dr , öğelerin kimliklerini saklamak için bir karma harita kullanarak ve anında açılır pencereler oluşturarak (Jeffrey Gilbert ve Kenny Meyer'in yaklaşımlarını karıştırarak) açık popover'ları numaralandırma ihtiyacından kaçınır.

İşte başkaları tarafından bahsedilen titreme problemini çözen, ancak @ Jeffrey Gilbert'in cevabının aksine, bir liste ( errorStates) kullanmaz, bunun yerine bir hata haritası kullanır . Karma haritalar FTW. Sanırım CS'deki her sorunun bir karma harita ile çözülebileceğini okuduğumu hatırlıyorum :)

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

Bu konuda fikir paylaşan herkese teşekkürler.

Bunu kontrol et: edin https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

JS yerine Bootstrap açılır penceresinin nasıl kullanılacağını gösterir. JS yöntemi açılır penceresi yanıp sönen soruna neden olacaktır.

Pop-up'lar için yukarıdaki Kenny Meyer kodunu kullanıyorsanız, bir alanın içeriğini kontrol eden ancak gerekli olmayan geçerli bir URL gibi kuralların, alanı temizledikten sonra pop-up'ın kaybolmamasına neden olacağına dikkat edin. Çözüm için aşağıdaki onkeyup'a bakın. Herhangi birinin daha iyi bir çözümü varsa, lütfen gönderin.

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