Sprawdzanie poprawności formularza jQuery - CSS etykiety błędu

Question

Używam dokładnie tego samego przykładu użytego na stronie jquery do prostego sprawdzania formularza; http://docs.jquery.com/Plugins/Validation

Jest jedna rzecz, której nie rozumiem, komunikat o błędzie w tym przykładzie jest wyświetlany po prawej stronie każdego pola wejściowego. Chcę wyświetlić błędy w każdym polu wejściowym. Jak to działa? Próbowałem grać z szerokością i paddingem, ale bez powodzenia.

Kod CSS, którego używam, jest nieco zmieniony, ale wciąż bardzo prosty;

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

Oto jfiddle http://jsfiddle.net/nBv7v/

Answer 1

Cytat OP: „wyświetlany jest komunikat o błędzie na przykład na prawo każdego pole wejściowe Chcę wyświetlać błędy pod każdym polem wejściowym . Jak to działa? "

można po prostu zmienić domyślny element z label do div za pomocą errorElement option. Ponieważ div jest "blok-poziom", automatycznie zawinie się do innej linii.

$(document).ready(function() { 

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

}); 

Demo pracy:http://jsfiddle.net/xvAPY/

Nawet nie trzeba zadzierać z CSS. Ale jeśli musisz coś zmienić, celuj w nie za pomocą div.error.

div.error { 
    /* your rules */ 
} 

---

Zobacz the documentation for more Validate plugin options.

Answer 2

Element label jest inline element a nie elementem block-level. Innymi słowy, domyślnie element label nie rozpocznie nowej linii.

W tym celu można przesłonić jego domyślne stylizacji tak:

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

Zobacz JsFiddle demo oparty na własną rękę.

Answer 3

Musisz ustawić display: block na label.error, w ten sposób wyświetli się w następnym wierszu. Teraz jedyną rzeczą, którą musisz zrobić, to dodać dopełnienie do label.error lub użyć tabeli lub czegoś, aby wyrównać błąd w polu tekstowym.

W jsFiddle pan pisał, co następuje modyfikacja umieścić komunikat o błędzie poniżej pól tekstowych:

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

Answer 4

Tak proste jak użycie tej klasy i tego css.

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