jquery.c3r.validate v1.0.4
Walidacja JS
Instalacja poprzez NPM
npm install jquery.c3r.validate
Wywołanie funkcji
Przekazane musi zostać ID formularza
$('#form').validate();
Przykład wykorzystania z ajax
$('#form').validate({
'blockSend': true
}).on('valid', function(){
$.ajax({
url: 'ajax.php',
type: 'POST',
data: $(this).serialize(),
success: function(data){
$('#ajax').html(data);
}
});
});
Funkcja prepare
Funkcja pozwala przygotować formularz do walidacji po modyfikacjach
$('#prepare').on('click', function(){
$('#form').validate('prepare');
})
Funkcja test
Funkcja pozwala sprawdzić poprawność formularza bez jego wysyłki
$('#test').on('click', function(){
$('#form').validate('test');
})
Ustawienia
Dodatkowe ustawienia przekazywane są jako parametr funcji
$('#form').validate({
'blockSend': false,
'invalidClass': 'invalid'
});
blockSend
Blokowanie przesłania formularza i przejścia do adresu wskazanego w action
default: false
blockSend: true/false
--
invalidClass
Klasa jaką ma otrzymać niepopranie zwalidowany element
default: 'invalid'
invalidClass: string
--
validClass
Klasa jaką ma otrzymać poprawnie zwalidowany element
default: 'valid'
validClass: string
--
liveValidation
Walidacja w czasie rzeczywistym
default: true
liveValidation: true/false
--
parentLevel
Poziom rodzica elementu który otrzyma klasę invalidClass/validClass
default: 1
parentLevel: intiger
--
parentLevelCheckbox
Poziom rodzica elementu checkbox który otrzyma klasę invalidClass/validClass
default: 1
parentLevelCheckbox: intiger
--
test
Tryb testowy, zwraca w konsoli status walidacji oraz elementy niepoprawnie zwalidowane
default: false
test: true/false
Funkcje Callback
Triggery przypisane do zdarzeń
send
Odpalany przy przesłaniu formularza bez względu na poprawność walidacji
$('#form').validate().on('send', function(e, a, b){
// e - event
// a - output( status walidacji )
// b - tablica błędnych elementów
});
--
valid
Odpalany przy poprawnym zwalidowaniu formularza
$('#form').validate().on('valid', function(){
// twój kod
});
--
invalid Odpalany przy niepoprawnym zwalidowaniu formularza
$('#form').validate().on('invalid', function(e, a){
// e - event
// a - tablica błędnych elementów
});
Parametry walidacji
Paterny do zastosowania dla konkretnych pól formularza
Imię
<input required type="text" name="name" data-pattern="^[a-zA-ZęóąśłżźćńĘÓĄŚŁŻŹĆŃ -]{3,}$">
--
<input required type="email" name="email">
--
Telefon
<input required type="text" name="phone" data-pattern="^[0-9+ ]{9,13}$" maxlength="13">
--
Data urodzenia
<input required type="text" name="birth" data-pattern="^[0-9]{1,2}[-/.][0-9]{1,2}[-/.][0-9]{4}$">
--
Pesel
<input required type="text" name="pesel" data-type="pesel" data-pattern="^[0-9]{11}$" maxlength="11">
--
Numer dowodu osobistego
data-pattern="^[A-Z]{3}[0-9]{6}$" maxlength="9"
--
Kod pocztowy
<input required type="text" name="post" data-pattern="^[0-9]{2}-[0-9]{3}$">
Funkcje pomocnicze
checkAllCheckbox()
Zaznaczanie kilku checkboxów - parametr pierwszy to klikany checkbox, drugi parametr to checkboxy do zaznaczenia
checkAllCheckbox('.klikniety-checkbox', '.checkbox1, .checkbox2');
--
preloader( visible, color, bg, opacity )
Wyświetla preloader
visible - true/false: wyświetla/usuwa preloader
color - HEX: parametr opcjonalny - kolor preloadera
bg - default: #fff: parametr opcjonalny - kolor tła pod preloader w formacie hex
opacity - default: 0.9: parametr opcjonalny - poziom krycia tła pod preloaderem
preloader( true );
preloader( false );
preloader( true, 'green','red', '.5');