Pracując z pluginem jQuery validation czasami okazuje się, że domyślnie wbudowane walidatory są niewystarczające dla naszych potrzeb. W takiej sytuacji nie pozostaje nic innego, jak stworzenie własnych walidatorów.
Dodawanie własnej metody walidującej
Aby dodać własną metodę walidującą należy skorzystać z następującej funkcji jQuery validation:
jQuery.validator.addMethod(name, validationFunction, message);
Jako parametry funkcja ta przyjmuje:
- name – nazwa walidatora
- validationFunction – funkcja walidująca pole
- message – komunikat zwracany, gdy wartość walidowanego pola jest nieprawidłowa
Funkcja walidująca jest anonimowa i ma następującą postać:
function(value, element, param);
Jako parametry przyjmuje ona:
- value – wartość pola
- element – walidowane pole formularza
- param – dodatkowe parametry dla metody walidującej
Jak widać dodawanie nowej metody walidującej do jQuery validate jest bardzo proste. Dla przykładu poniżej zamieszczam kody kilku metod walidujących, które mogą przydać się w codziennej pracy.
Walidator sprawdzający, czy ilość znaków w danym polu ma dokładnie ustaloną wartość
jQuery.validator.addMethod("exactlength", function(value, element, param) {
return this.optional(element) || value.length == param;
}, jQuery.format("Please enter exactly {0} characters."));
Użycie walidatora:
$("#form").validate({
rules: {
zipCode: {
exactlength: 5
}
}
});
Walidator sprawdzający czy w polu formularza występują tylko i wyłącznie litery
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");
Użycie walidatora
$("#form").validate({
rules: {
firstName: {
lettersonly: true
}
}
});
Generyczny walidator sprawdzający zawartość pola zadanym wyrażeniem regularnym
jQuery.validator.addMethod("accept", function(value, element, param) {
return value.match(new RegExp("." + param + "$"));
});
Użycie walidatora ze sprawdzeniem czy w polu formularza są tylko cyfry:
$("#form").validate({
rules: {
someNumberField: {
accept: "[0-9]+"
}
}
});
Użycie walidatora ze sprawdzeniem czy w polu formularza są tylko litery:
$("#form").validate({
rules: {
someNumberField: {
accept: "[a-zA-Z]+"
}
}
});
Jak widać dodawanie własnych metod walidujących jest dość proste. Jedyna rzeczą, o której należy pamiętać jest dodanie własnych metod walidujących przed wywołaniem metody validate();