fredag 7 augusti 2009

Validera formulär med jQuery

jQuery går alldeles utmärkt att använda till att validera olika fält i formulär.

Lägg inom HEAD-taggen:

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jquery.validate.min.js"></script>

Obligatoriska fält
Ange klassen required för de fält i ditt formulär som ska vara obligatoriska att fylla i.

Ex:
<input type="text" name="username" class="required" />

Validera epost
Ange klassen email för att kontrollera om ifylld epost-adress är giltiga.

Ex:
<input type="text" name="email" class="email" />

Kräva ett visst antal tecken
Vill man begränsa antalet tecken som matas in till minsta antal och högsta antal anger man klassen rangelength.

Ex:
<input type="password" name="password" class="rangelength" maxlength="10" minlength="5" />

Stämmer lösenorden överrens?
Ska besökaren skriva in sitt lösenord två gånger? Då kan jQuery matcha lösenorden så att de stämmer överrens.

Ex:
Lösenord: <input type="password" name="password1" id="password1" />

Bekräfta lösenord: <input type="password" name="password2" id="password2" equalto="#password1" />

Godkänn villkoren
Har du en checkruta som måste kryssas i för att besökaren ska kunna skicka formuläret, t ex "Acceptera våra villkor annars..."? Gör en specialare!

Lägg inom HEAD-taggen:

<script type="text/javascript">
$(document).ready(function(){
$("#form").validate({ //#form är formulärets id
rules: {
agree: "required"
},
messages: {
agree: "Du måste godkänna villkoren!"
}
}); });
</script>

I formuläret:
Jag godkänner villkoren <input type="checkbox" id="agree" name="agree" />

Läs mer och ladda ner plugin

Inga kommentarer: