Üzerinde bir etiket yerine bir div ile varsayılan hata iletisini etiket sürmeye çalışıyorum. this post de baktı ve bunu nasıl elde ettim ama CSS ile sınırlarımın beni korkutuyor. Nasıl bu örneklerden bazıları gibi bu görüntü alabilir miyim:

Example #1 (Dojo) - geçersiz giriş hatası ekran görmek yazmanız Gerekir< / ^ br . Example #2

Burada bir div elemanı için hata etiketi geçersiz kılan bazı örnek kod

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

Şimdi css kısmı ama işte burada ne yapacağımı bile bilmiyorum:

div.error {
        position:absolute;
        margin-top:-21px;
     margin-left:150px;
     border:2px solid #C0C097;
        background-color:#fff;
        color:white;
        padding:3px;
        text-align:left;
        z-index:1;
        color:#333333;
     font:100% arial,helvetica,clean,sans-serif;
     font-size:15px;
     font-weight:bold;  
    }

GÜNCELLEME:

Şimdi bu kodu kullanıyorum ama görüntü ve açılan yerleşimi, sınır daha büyük sorun, bu yüksekliği dinamik olarak ayarlanabilir?

if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
   element = element.parent();

   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left   element.outerWidth());
   error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
   // Error placement for single elements
   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left   element.outerWidth());
   error.css('top', offset.top - (element.height() / 2));
}

css aşağıdaki gibi aynı (css kod)

Html

<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>

errorPlacement küçük css hata iletisi görüntü geçersiz kılmak için bu seçeneği kullanabilirsiniz. Kendi başına çünkü css ihtiyacınız olan etkiyi yaratmak için yeterli olmayacaktır.

$(document).ready(function(){
    $("#myForm").validate({
        rules: {
            "elem.1": {
                required: true,
                digits: true
            },
            "elem.2": {
                required: true
            }
        },
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left   element.outerWidth());
            error.css('top', offset.top);
        }

    });
});

Sol ile oynayabilirsiniz ve üst css öğenin üst, sol, sağ veya alt kısmında hata mesajı göstermek için öznitelikleri. Örneğin üst: yanlış olduğunu göstermek için

    errorPlacement: function(error, element) {
        element.before(error);
        offset = element.offset();
        error.css('left', offset.left);
        error.css('top', offset.top - element.outerHeight());
    }

Ve benzeri. Daha fazla seçenek için jQuery documentation about css başvurabilirsiniz.

Burada kullanılan css. Sonuç tam istediğiniz gibi görünüyor. Mümkün olduğunca: küçük CSS ile

div.message{
    background: transparent url(msg_arrow.gif) no-repeat scroll left center;
    padding-left: 7px;
}

div.error{
    background-color:#F3E6E6;
    border-color: #924949;
    border-style: solid solid solid none;
    border-width: 2px;
    padding: 5px;
}

Ve burada sana ihtiyacım var arka plan görüntüsü

Hata iletisini seçenekler veya alanlar bir grup sonra görüntülenmesini istiyorsanız. Sonra bir kap içinde tüm bu unsurları grubu '' veya''. alan kümesi bir div Hepsini 'grup' örneğin. özel bir sınıf ekleyin Ve errorPlacement işlevi başlamadan önce aşağıdakileri ekleyin:

errorPlacement: function(error, element) {
    if (element.hasClass('group')){
        element = element.parent();
    }
    ...// continue as previously explained

Eğer sadece belirli davalara bakmak istiyorsanız sorudur yerine kullanabilirsiniz:

if (element.attr('type') == 'radio'){
    element = element.parent();
}

Bu hata iletisini ana öğenin yanında görüntülenmesi için yeterli olacaktır.

Ana öğe genişliği 0'den az olması için değiştirmek gerekebilir.

< / ^ hr .

Kodunuzu denedim ve gayet iyi benim için çalışıyor. Burada bir önizleme:

Ben sadece mesaj için çok küçük bir ayar doldurma çizgisine uygun hale getirmek için:

div.error {
    padding: 2px 5px;
}

Bu numaraları/üst/alt doldurma artırmak veya azaltmak için sol/sağ değiştirebilirsiniz. Ayrıca, hata iletisi için bir yükseklik ve genişlik ekleyebilirsiniz. Eğer hala sorunlar yaşıyorsanız, bir div ile yayılma alanını değiştirmeyi deneyin

<div class="group">
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</div>

Ve bu kaba bir genişlik ver (bu çok önemli)

div.group {
    width: 50px; /* or any other value */
}

Hakkında boş bir sayfa. Kodunuzu denedim ve benim için çalışıyor dediğim gibi. Soruna neden olan kod içinde başka bir şey olabilir.