Dodawanie walidacji JavaScript do formularzy jest bardzo proste. Trzeba utworzyć obiekt FORM do reprezentowania formularza:
<script type="text/javascript">
//< ![CDATA[
var myForm= new VarienForm('formId', true);
//]]>
</script>
Pierwszy parametr to identyfikator (ID) formularza. Drugi ustawiony na TRUE powoduje automatyczne ustawienie kursora w pierwszym polu formularza. Ustawiony na FALSE nie ustawia kursowa.
Następnie tworzymy formularz z odpowiednimi regułami sprawdzającymi poprawność danych pól.
<label for="name">URL Address *</label> <input type="text" id="url" name="url" value="" class="required-entry validate-url"/> <label for="email">Email Address *</label> <input type="text" id="email" name="email" value="" class="required-entry validate-email"/>
Istnieje cała masa gotowych klas, które wystarczy przypisać do odpowiednich pól formularza.
validate-select
Wybierz opcję
required-entry
To pole jest wymagane
validate-number
Proszę podać prawidłowy numer
validate-digits
Proszę używać tylko cyfr. Należy unikać spacji lub innych znaków, takich jak kropki lub przecinki
validate-alpha
Tylko litery (a-z lub A-Z).
validate-code
Tylko litery (a-z), cyfry (0-9) lub znak podkreślenia (_), pierwszy znak powinien być literą.
validate-alphanum
Tylko litery (a-z lub A-Z) lub cyfry (0-9). Spacje i inne znaki są niedozwolone
validate-street
Tylko litery (a-z lub A-Z) lub cyfry (0-9) lub spacje i #.
validate-phoneStrict
Proszę podać prawidłowy nr telefonu. Np. (123) 456-7890 lub 123-456-7890.
validate-phoneLax
Proszę podać prawidłowy nr telefonu. Np. (123) 456-7890 lub 123-456-7890.
validate-fax
Proszę podać prawidłowy nr faxu. Np. (123) 456-7890 lub 123-456-7890.
validate-date
Proszę podać prawidłową datę
validate-email
Proszę podać prawidłowy adres e-mail. Np. johndoe@domain.com.
validate-emailSender
Tylko litery (a-z lub A-Z), cyfry (0-9) , znak podkreślenia (_) lub spacje.
validate-password
Proszę wpisać 6 lub więcej znaków. Wiodące lub końcowe spacje są ignorowane.
validate-admin-password
Proszę podać 7 lub więcej znaków. Hasło powinno zawierać znaki numeryczne i alfabetyczne
validate-cpassword
Proszę upewnić się, że hasła są poprawne
validate-url
Prawidłowy adres URL. http:// jest wymagany
validate-clean-url
Proszę podać prawidłowy adres URL. Np. http://www.example.com lub www.example.com
validate-identifier
Proszę podać poprawny identyfikator. Np. example-page, example-page.html lub anotherlevel/example-page
validate-xml-identifier
Wpisz poprawny identyfikator XML. Np. something_1, block5, id-4
validate-ssn
Proszę podać poprawny numer ubezpieczenia społecznego. Na przykład 123-45-6789
validate-zip
Proszę podać kod pocztowy. Np. 90602 lub 90602-1234
validate-zip-international
Proszę podać prawidłowy kod pocztowy
validate-date-au
Proszę użyć tego formatu daty: dd / mm / rrrr. Np. 17/03/2006 dla 17 marca 2006
validate-currency-dollar
Proszę podać prawidłową kwotę $. Np. $100,00
validate-one-required
Proszę wybrać jedną z powyższych opcji.
validate-one-required-by-name
Proszę wybrać jedną z opcji.
validate-not-negative-number
Proszę podać poprawny numer
validate-state
Proszę wybrać State/Province
validate-new-password
Proszę wpisać 6 lub więcej znaków. Wiodące lub końcowe spacje są ignorowane
validate-greater-than-zero
Proszę podać cyfrę większą od 0
validate-zero-or-greater
Proszę podać cyfrę 0 lub większą
validate-cc-number
Proszę podać prawidłowy numer karty kredytowej.
validate-cc-type
Numer karty kredytowej nie zgadza się typ karty kredytowej
validate-cc-type-select
Typ karty nie zgadza się numer karty kredytowej
validate-cc-exp
Nieprawidłowa data ważności karty kredytowej
validate-cc-cvn
Proszę podać prawidłowy numer weryfikacyjny karty kredytowej.
validate-data
Tylko litery (a-z lub A-Z), cyfry (0-9) lub znak podkreślenia (_), pierwszy znak powinien być literą.
validate-css-length
Proszę podać prawidłową długość CSS. Np. 100px lub 77pt lub 20em lub .5ex lub 50%
validate-length
Maksymalna długość