Parsley.js bietet eine reibungslose clientseitige Formularvalidierung ohne lästigen Boilerplate-Code.
Initialisierung
// Empfohlene JavaScript-Initialisierung
$('#myForm').parsley({
errorClass: 'is-invalid',
successClass: 'is-valid'
});
Standard-HTML-Validierungsbeschränkungen
<!-- Erforderlich -->
<input required />
<!-- E-Mail- und URL-Typen -->
<input type="email" />
<input type="url" />
<!-- Längenbegrenzungen -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />
<!-- Numerische und Regex-Muster -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />
<!-- Zahlenbereich -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />
<!-- Checkbox-Auswahlgrenzen -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />
<!-- Passwortbestätigung abgleichen -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />
JavaScript-Formular- & Feld-API
Formular-Methoden
const form = $('#myForm').parsley();
form.isValid(); // Gibt true zurück, wenn gültig, sonst false
form.validate(); // Führt Validierung aus und rendert Fehlermeldungen
form.reset(); // Setzt Validierungsstatus zurück und leert Fehler
form.destroy(); // Entfernt Parsley-Handler vom Formular
Feld-Methoden
const field = $('#username').parsley();
field.isValid();
field.validate(); // Gibt Array von fehlgeschlagenen Bedingungen zurück
Benutzerdefinierte Validatoren
Benutzerdefinierte Validatoren global registrieren:
window.Parsley.addValidator('multipleOf', {
requirementType: 'integer',
validateNumber(value, requirement) {
return value % requirement === 0;
},
messages: {
de: 'Dieser Wert muss ein Vielfaches von %s sein.',
en: 'This value must be a multiple of %s.'
}
});
Verwendung im HTML-Markup:
<input type="number" data-parsley-multiple-of="5" />