Walidacja formularza za pomocą jQuery Validator

Dla specjalistów Webmastering
#1

Witam,

pobrałem sobie plugin jQUery służący do walidacji pól formularza.

http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js

Działa on całkiem nieźle, tylko nie umiem sobie poradzić z jedną sprawą.

Mianowicie podczas kliknięcia buttona on sprawdza czy wszystkie pola, które określiłem jako wymagane, zostały uzupełnione (w tym przypadku sprawdza czy nie są puste) i ewentualnie dodaje jakiś tekst przy każdym polu, że użytkownik ma je uzupełnić.

$(document).ready(function(){

    $("#formularz").validate({  

        rules: {

            city: {

                required: true,

                }

        messages: {

            city:{

                required: "

Uzupełnij to polel
" } } }); }); [/code] Ciekawą sprawą jest to, że w momencie kiedy pole jest puste i walidator wykonuje swoją pracę, dodaje do klasy pola wartość ‘error’. Czyli mając:

[code]
przekształca to na:

Ta opcja jest dobra, z tym że jeżeli mam jakiś niestandarową formę tego pola czyli np. coś takiego, że mam inputa w divie, który określa jego kształt i sprawia wrażenie jakby cały ten div był jednym polem, czyli np coś takiego: search_input.jpg

#2

pierwszy taki brute force pomysł:

dodać funkcje sprawdzająca czy ten input ma klasę error jeśli tak to przenieś klasę do diva.

i funkcję tę odpalać po zakończeniu walidacji.

Wieczorem zerknę jeszcze do tego kodu ale wątpie by można to było zrobić jakąś małą modyfikacją.

Pytanie dodatkowe czy ten input ze specjalnym div jest jeden (dwa) czy dla wszystkich pól w formularzu?

#3

Jest to jakiś sposób, można by to rozwiązać taką metodą.

Tych inputów będzie więcej - dokładnie 9.

Jeżeli znajdziesz jeszcze jakiś sposób to będę wdzięczny.

Pozdrawiam.

#4

no więc zerknąłem do kodu i o dziwo udało mi się szybko i sprawnie zrobić taką poprawkę

highlight:function(element,errorClass,validClass){

    $(element.parentNode).addClass(errorClass).removeClass(validClass);


},

unhighlight:function(element,errorClass,validClass){

    $(element.parentNode).removeClass(errorClass).addClass(validClass);

}

zamiast

highlight:function(element,errorClass,validClass){

    $(element).addClass(errorClass).removeClass(validClass);


},

unhighlight:function(element,errorClass,validClass){

    $(element).removeClass(errorClass).addClass(validClass);

}

to przeniosło dodawaną klasę error do parenta,

można by dodać ewentualne warunki kiedy ma tak robić a kiedy zachowywać się standardowo ale to już zostawiam tobie

#5

świetnie, o to mi chodziło.

Dzięki wielkie grzelix