Ściągawka z walidacji formularzy w Parsley.js

Parsley.js zapewnia wygodną walidację formularzy po stronie klienta bez pisania powtarzalnego kodu.

Inicjalizacja

// Zalecana inicjalizacja w JavaScript
$('#myForm').parsley({
  errorClass: 'is-invalid',
  successClass: 'is-valid'
});

---

Standardowe ograniczenia walidacji HTML

<!-- Pole wymagane -->
<input required />

<!-- Typy e-mail i URL -->
<input type="email" />
<input type="url" />

<!-- Limity długości -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- Wzorce liczbowe i Regex -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

<!-- Zakres liczbowy -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />

<!-- Granice wyboru pól wyboru (checkbox) -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- Potwierdzenie zgodności hasła -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

---

JavaScript API formularza i pól

Metody formularza

const form = $('#myForm').parsley();

form.isValid();   // Zwraca true jeśli prawidłowy, false jeśli nie
form.validate();  // Uruchamia walidację i wyświetla błędy
form.reset();     // Resetuje stan walidacji i czyści błędy
form.destroy();   // Usuwa obsługę Parsley z formularza

Metody pól

const field = $('#username').parsley();

field.isValid();
field.validate(); // Zwraca tablicę niespełnionych ograniczeń

---

Własne walidatory

Globalna rejestracja własnych walidatorów:

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    pl: 'Ta wartość musi być wielokrotnością %s.',
    en: 'This value must be a multiple of %s.'
  }
});

Użycie w znacznikach HTML:

<input type="number" data-parsley-multiple-of="5" />

---

Źródła i dokumentacja

• Oficjalna dokumentacja Parsley.js