Valider

Created: 2012-08-21 12:53
Updated: 2016-03-03 13:46

README.md

Valider

Walidator formularzy client-side w HTML5.

Instalacja

$ bower install valider

Przykład

Online:

$('form').Valider({
    onErrors: function(errors) {
        // Tutaj możesz zrobić coś z wszystkimi błędami
        // `errors` jest obiektem w którym kluczem jest nazwa inputa
    },
    onInputError: function(error) {
        // Błąd dla poszczególnego inputa
        // Możesz np. dodać klasę błędu
        this.addClass('error')
        // Oraz umieścić gdzieś komunikat `error`
        var errorTag = this.next();
        if (errorTag.lenght) {
            errorTag.text(error);
        } else {
            errorTag = $('<span/>', {text: error});
            this.after(errorTag);
        }
    },
    onInputPass: function() {
        // Input który miał błąd i użytkownik go poprawił,
        // więc trzeba usunąć klasę
        this.removeClass('error');
        // oraz komunikat
        this.next().remove();
    }
    // Jest tu jeszcze parametr lang np. `lang: 'ru'`
    // ale nie trzeba o nim pamiętać
    // domyślnie jest brany z atrybutu `lang` w tagu <html>
});

Dodatkowa konfiguracja

W łatwy sposób można dodać własne wyrażenie regularne:

$.Valider.addRegex('binary', /^[01]+$/);

Teraz wystarczy tylko użyć atrybutu data-regex podając wcześniej zdefiniowaną nazwę:

<input type="text" name="code" data-regex="binary">

Możemy też tworzyć własne funkcje, które sprawdzą poprawność inputa:

$.Valider.addFilter('[data-not]', function(input, val) {
    return $.inArray(val, input.data('not').split(',')) === -1;
});
<input type="text" name="user" data-not="admin,root">

Trzeba również pamiętać o komunikatach, tak więc dodajmy dwa do powyższych przykładów:

$.Valider.addLang({
        'pl': {
            'regex:binary': 'Niepoprawny kod binarny',
            '[data-not]': 'Wymyśl jakiś lepszy login'
        },
        'en': {
            'regex:binary': 'Invalid binary code',
            '[data-not]': 'Think of a better login'
        }
    })

License

Valider is open-sourced software licensed under the MIT License.

Changelog

1.2.3

  • Fix: Filtrowanie inputów po nazwie może spowodować błędy

1.2.2

  • Fix: Teraz komunikaty przy .invalidate(errors) znikają jak nie podano

1.2.0

  • Walidacja teraz jest również przy "on change"
  • Dodatkowy event dla inputa "validate"

1.1.1

  • Walidacja email powinna być case insensitive
  • Drobne poprawki formatowania

1.1.0

  • Walidacja zaraz po opuszczeniu pola (blur)
  • Nowy filtr [data-limit] do ograniczania maksymalnej ilości znaków w polu
  • Poprawione przykłady

1.0.0

  • Więcej przykładów
  • Usunięty domyślny alert w przypadku błędu
  • Dodatkowy parametr input w callbackach błędów

0.5.0

  • ValiderConfig -> $.Valider

0.4.0

  • dodawania własnych filtrów ($.Valider.addFilter)
  • dodawanie wyrażeń regularnych ($.Valider.addRegex) i ich komunikatów (regex:nazwa)

0.3.1

  • Parę drobnych poprawek

0.3.0

  • Usunięto Lo-dash
  • Dodano wymuszenie typu inputa za pomocą data-type
  • Dodana walidacja URLi
  • Strict mode
  • Lepszy data-equals

0.2.0

  • Porównanie dwóch inputów (data-equals)
  • Tłumaczenie na angielski

0.1.0

  • Initial release
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more