victorjonsson.se

jQuery plugin för formulärvalidering

Det finns vissa kodstycken jag upplever att jag skriver på nytt hela tiden. Validering av indata i såväl front- som backend är en sådan typ av kod.

Jag har skrivit en plugin till jQuery som jag hädan efter alltid kommer använda mig av när det ska till att valideras formulärdata i front-end. Det speciella med denna plugin är att man sätter upp reglerna för hur indatan ska valideras via elementens klassattribut, på så sätt slipper man javascript i htmlkoden och koden blir ren och lättläst.

Exempel:

<form action="" onsubmit="return $(this).validate();">
  <p>
    Name: <input name="name" class="validate_min_length length3" />
  </p>
  <p>
    Birthdate: <input name="birth" class="validate_birthdate" />
  </p>
  <p>
    Telephone: <input name="tele" class="validate_phone" />
  </p>
  <p>
    Arrival date: <input name="date" class="validate_date" />
    Arrival time: <input type="time" class="validate_time" />
  </p>
  <p>
    <input type="submit" value="Send" />
  </p>
</form>

Denna plugin är givetvis open source, du kan tanka hem koden och även bidra till projektet på github https://github.com/victorjonsson/jQuery-Form-Validator. Så här långt finns funktionalitet för att validera webbadress, datum, födelsedag, email, tid, domännamn, telefon samt mobilnummer, flytande- och heltal, längd, att två input-fälts värden bekräftar varandra och sist men inte minst en enkel captcha-funktion.