Parsley.js Formuliervalidatie Spiekbrief

Parsley.js biedt gebruiksvriendelijke formuliervalidatie aan de clientzijde zonder JavaScript-boilerplate.

Initialisatie

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

---

Standaard HTML-validatiebeperkingen

<!-- Verplicht -->
<input required />

<!-- E-mail- en URL-typen -->
<input type="email" />
<input type="url" />

<!-- Lengtelimieten -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- Numerieke en regex-patronen -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

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

<!-- Checkbox-selectielimieten -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- Wachtwoordbevestiging vergelijken -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

---

JavaScript Formulier- & Veld-API

Formulier-methoden

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

form.isValid();   // Retourneert true indien geldig, anders false
form.validate();  // Voert validatie uit en toont foutmeldingen
form.reset();     // Reset validatiestatus en wist fouten
form.destroy();   // Verwijdert Parsley-handlers van formulier

Veld-methoden

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

field.isValid();
field.validate(); // Geeft array met gefaalde beperkingen terug

---

Aangepaste Validators

Registreer aangepaste validators wereldwijd:

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    nl: 'Deze waarde moet een veelvoud zijn van %s.',
    en: 'This value must be a multiple of %s.'
  }
});

Gebruik in HTML-markup:

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

---

Referenties

• Officiële Parsley.js Documentatie