2012-04-17 3 views
6

Używam jQuery Validation PluginjQuery Validation wyświetla błędy jak inline domyślnie trzeba zmienić na inline-block

Jak mogę zmienić wygenerowanym komunikaty o błędach display wartość inline-block gdy nie jest ukryty?

Próbowałem z CSS, ale jQuery nadpisuje to.

+0

Gdzie jest twój kod? Co zrobiłeś do tej pory? – Sparky

+0

Witam, niestety jest to projekt wewnętrzny, więc nie mogę skierować Cię do linku. Próbuję znaleźć miejsce, w którym jquery mówi kod, aby dodać wyświetlacz: wstawiany do etykiety błędu, gdy jest wyświetlany, i zmień to, aby wyświetlić: blok wbudowany –

+0

Nie prosiłem o opublikowanie łącza. Niemniej jednak wystarczy zajrzeć do wtyczki i dostosować w razie potrzeby ... to tylko jQuery/JavaScript. – Sparky

Odpowiedz

4

Użyj opcji errorClass określić klasę przypisany do komunikatów o błędach i elementy błędach:

$(".selector").validate({ 
    errorClass: "invalid" 
}) 

<style type="text/css"> 
    .invalid { 
    display: inline-block !important; 
    } 
</style> 

Zobacz dokumentację opcji walidatora:

http://docs.jquery.com/Plugins/Validation/validate#options

+4

Dzięki temu nie można ukryć błędów, gdy pole jest ważne – jetlej

+1

Uzgodniono z @jetlej, To powoduje przerwanie funkcjonalności sprawdzania poprawności jako ekranu: brak generowany przez wtyczkę, aby ukryć niepotrzebny komunikat o błędzie sprawdzania poprawności nie jest już uważany za ważny! –

0

Jeśli używasz !important na CSS, powinny mieć pierwszeństwo nad tym, co robi jQuery:

.error { 
    display: inline-block !important; 
} 
+0

Po tym spróbowałem, ale to nie zadziałało –

+0

Hmm, działa dla mnie ... Czy spojrzałeś w Firebug, lub inny debugger, aby zobaczyć, jaki styl jest stosowany i co jest powodujące, że blok 'inline' nie zostanie zastosowany? –

+0

Wewnętrzna stylizacja z wtyczki zastępuje CSS –

0

jQuery validate nie ma zdefiniowanych stylów CSS. Czy używasz innych bibliotek z definicjami CSS dla klasy "błąd"?

Oto JsFiddle przykładowy kod z jQuery sprawdzania poprawności przy użyciu inline-block o błędzie:

http://jsfiddle.net/maxim75/HKnQD/4/

.error 
{ 
    color: Red; 
    display: inline-block; 
}​ 

go otworzyć i sprawdzić w przeglądarce:

enter image description here

+0

Cześć, dziękuję, zdałem sobie z tego sprawę wczoraj, testując odpowiedzi, które otrzymałem. Pozdrawiam –

5

Wpadłem na to i nie mogłem użyć CSS, ponieważ jQuery używa metod show() i hide() w elemencie błędu (który ustaw "display: block;" inline) po początkowym utworzeniu. Zamiast tego możesz użyć podświetlania wtyczki sprawdzania poprawności i metod niewyważenia, aby zmienić wbudowane css.

errorElement: 'em', 

highlight: function(element, errorClass) { 
    $(element).addClass(errorClass); // good for changing field backgrounds 
    $(element).next('em').css('display','inline'); // keeps error message layout clean 
}, 

unhighlight: function(element, errorClass) { 
     $(element).removeClass(errorClass); // good for changing field backgrounds 
     $(element).next('em').css('display','none'); // keeps error message layout clean 
}, 
+0

Dzięki stary. Pozdrawiam –

+0

To jest poprawna odpowiedź – hamishtaplin