Parsley.js assure une validation de formulaires côté client sans code JavaScript redondant.
Initialisation
// Initialisation JavaScript recommandée
$('#myForm').parsley({
errorClass: 'is-invalid',
successClass: 'is-valid'
});
Contraintes standard de validation HTML
<!-- Requis -->
<input required />
<!-- Types e-mail et URL -->
<input type="email" />
<input type="url" />
<!-- Limites de longueur -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />
<!-- Motifs numériques et Regex -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />
<!-- Intervalle numérique -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />
<!-- Limites de sélection de cases à cocher -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />
<!-- Confirmation de mot de passe -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />
API JavaScript pour formulaires et champs
Méthodes de formulaire
const form = $('#myForm').parsley();
form.isValid(); // Renvoie true si valide, false sinon
form.validate(); // Exécute la validation et affiche les messages d erreur
form.reset(); // Réinitialise l état et efface les erreurs
form.destroy(); // Détache les écouteurs Parsley du formulaire
Méthodes de champ
const field = $('#username').parsley();
field.isValid();
field.validate(); // Renvoie un tableau des contraintes échouées
Validateurs personnalisés
Enregistrer des validateurs personnalisés globalement :
window.Parsley.addValidator('multipleOf', {
requirementType: 'integer',
validateNumber(value, requirement) {
return value % requirement === 0;
},
messages: {
fr: 'Cette valeur doit être un multiple de %s.',
en: 'This value must be a multiple of %s.'
}
});
Utilisation dans le balisage :
<input type="number" data-parsley-multiple-of="5" />