Validare form folosind jQuery

În cele ce urmează voi prezenta o validare simplă a unui formular folosind framework-ul jQuery.

Fişierele necesare pentru validare sunt

• jQuery ce se poate descărca de aici – Current Release minified sau uncompressed.
• Scriptul de validare ce se poate descărca de aici. Dacă face figuri descărcaţi versiunea 1.3.2 de jQuery cu care merge bine.

se includ cele 2 fişiere în partea de head

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

Atenţie la calea către fişier şi la numele acestuia. Eu am folosit versiunile minified.

Codul de validare:
$(document).ready(function() {
$("#form1").validate({ // form1 este ID-ul formului care se validează
rules: { //reguli de validare
nume_camp1: "required", // regulă simplă, echivalent cu {required:true}
camp_email: { // regulă compusă
required: true,
email: true},
alt_camp1: "required",
alt_camp2: "required" // atentie la ultimul câmp, nu mai trebuie virgulă
}, // aici se termină regulile, se pune virgulă, urmează mesajele
messages: { // mesajele ce se vor afişa pentru fiecare câmp invalid
nume_camp1: "Câmp obligatoriu.",
camp_email: "Email obligatoriu.",
alt_camp1: "Alt mesaj 1",
alt_camp2: "Alt mesaj 1"
}
});

Pentru formatarea mesajelor de eroare se introduce în css

label.error {color:Red;} //exemplu pentru culoarea roşie a mesajelor

save -> open browser -> run page -> tadaaaa.