jQuery validation – własne walidatory

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();