Parsley.js Formulärvalidering Fusklapp

Parsley.js erbjuder klientsidevalidering av formulär med utmärkt UX utan repetitiv kod.

Initiering

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

---

Standard HTML-valideringsregler

<!-- Obligatoriskt -->
<input required />

<!-- E-post och URL-typer -->
<input type="email" />
<input type="url" />

<!-- Längdgränser -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- Numeriska och regex-mönster -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

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

<!-- Gränser för val av kryssrutor -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- Matcha lösenordsbekräftelse -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

---

JavaScript Formulär- & Fält-API

Formulärmetoder

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

form.isValid();   // Returnerar true om giltigt, annars false
form.validate();  // Kör validering och visar felmeddelanden
form.reset();     // Återställer valideringsstatus och rensar fel
form.destroy();   // Tar bort Parsley-lyssnare från formuläret

Fältmetoder

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

field.isValid();
field.validate(); // Returnerar array med misslyckade villkor

---

Anpassade validatorer

Registrera anpassade validatorer globalt:

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    sv: 'Detta värde måste vara en multipel av %s.',
    en: 'This value must be a multiple of %s.'
  }
});

Användning i HTML-markup:

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

---

Referenser

• Officiell Parsley.js Dokumentation