2013-02-02 24 views
5

Basit bir form doğrulaması için jquery web sitesinde kullanılanla aynı örneği kullanıyorum; http://docs.jquery.com/Plugins/ValidationjQuery form doğrulama - hata etiketi CSS'si

Anladığım bir şey yok, örnekte hata iletisi, her giriş alanının sağında görüntülenir. Her giriş alanının altındaki hataları görüntülemek istiyorum. Bu nasıl çalışıyor? Genişlik ve dolgu ile uğraşmayı denedim ama şimdiye kadar hiç şans yoktu.

Kullandığım CSS kodu biraz değiştirilmiş, ancak hala çok basit;

label { width: 10em; float: left; } 
label.error { float: none; color: red; padding-left: 0px; vertical-align: bottom; } 
p { clear: both; } 
fieldset {position: absolute; left: 450px; width: 400px; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; } 

İşte jfiddle http://jsfiddle.net/nBv7v/

+0

Davranışı görebilmemiz için jsfiddle veya benzeri bir mesaj gönderebilir misiniz? –

+0

http://jsfiddle.net/nBv7v/ – Student

cevap

13

Alıntı OP: "Örneğin hata mesajı her sağında görüntülenen aşağıdaki modifikasyon metin kutularının altında hata mesajı koyardı, yayınlanan jsFiddle yılında

giriş alanı.Hataları her bir giriş alanında görüntülemek istiyorum. Bu nasıl çalışır? "

Sadece errorElement option kullanarak div için label varsayılan elemanı değiştirebilir. div "blok seviyesi" olduğundan, otomatik olarak başka bir satıra kaydırılır.

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     errorElement: 'div', 
     // your other rules and options 
    }); 

}); 

Çalışma Demosu:http://jsfiddle.net/xvAPY/

Hatta CSS ile uğraşmak zorunda değilsiniz. Ancak bir şeyi değiştirmeniz gerekirse, div.error ile hedefleyin.

div.error { 
    /* your rules */ 
} 

the documentation for more Validate plugin options bakınız.

+0

Teşekkür ederim. Bu işe yaradı! – Student

+0

@Student, rica ederim. – Sparky

5

label öğesi, bir inline element ve bir block-level unsur olmasıdır. Başka bir deyişle, varsayılan olarak label öğesi yeni bir satır başlatmayacaktır.

Bunu yapabilmek için, sen şöyle varsayılan stil geçersiz kılabilirsiniz:

label.error { 
    display:block; 
    width:100%; 
    ... 
} 

kendi dayalı JsFiddle demo bakınız.

+0

Teşekkürler adamım. Bu da işe yarıyor. – Student

+0

@Student Sorun yok.Eklentinin CSS'si ile uğraşmak yerine belgelenmiş bir eklenti seçeneği kullandığından, Sparky'nin çözümünü daha iyi kullanmayı tercih ediyorum. – Boaz

1

label.error'da display: block değerini ayarlamanız gerekir, bu şekilde sonraki satırda görüntülenir. Şimdi yapmanız gereken tek şey, label.error'a daha fazla dolgu eklemek ya da hatayı metin kutusunun altında hizalamak için bir tablo veya bir şey kullanmaktır.

label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; } 
0

Bu sınıfı ve bu css'yi kullanmak kadar basit.

.has-error input{ 
    background: rgba(166, 66, 66, 0.69); 
} 
İlgili konular