Javascript Validation in Magento

Hello friends,

Validation is most important thing in any sort of website development to get proper user input. There are mainly two types of validation: Client Side and Server Side. In order to perform client side validation javascript is one of the best options.

While working in magento it is good to know that magento uses a file called form.js (/js/varien/form.js) which has Validation class and it is part of the Prototype javascript library. In Validation class, javascript functions are there to perform form validation. So there is no need to write extra code to perform javascript validation.

In magento applying javascript validation to any form is so simple. Follow the under given steps to apply javascript validation to your custom form.

Step 1: Apply the validation class to your form controls according to your requirement.

For Example:

<input type="text" id="name" name="name" value="" class="required-entry" />
<input type="text" id="dob" name="dob" value="" class="required-entry validate-date"/>
<input type="text" id="email" name="email" value="" class="required-entry validate-email"/>

In above example we have three form controls name, dob and email. There we apply required-entry, validate-date and validate-email classes to form controls. And those classes will perform required field validation, date validation and email validation for their respective form control.

Here we applied validation class to form controls because Validation class works by checking form inputs for certain class names.

Step 2: Create a form object to represent your form.

<script type="text/javascript">
//< ![CDATA[
var customForm= new VarienForm('customFormId', true);
//]]>
</script>

Here the first argument customFormId is the Id of your form. And if you set true to second argument then the cursor will automatically move into the first input field. You can also set second argument to false.

Now when user will submit the form and if any improper data is there in user input then validate class will give the proper error message and will not submit the form until user enters proper data.

There are many inbuilt validation classes in magento to perform different types of validation. Here I have listed those:

validate-select

Please select an option

required-entry

This is a required field

validate-number

Please enter a valid number in this field

validate-digits

Please use numbers only in this field. please avoid spaces or other characters such as dots or commas

validate-alpha

Please use letters only (a-z or A-Z) in this field.

validate-code

Please use only letters (a-z), numbers (0-9) or underscore(_) in this field, first character should be a letter.

validate-alphanum

Please use only letters (a-z or A-Z) or numbers (0-9) only in this field. No spaces or other characters are allowed

validate-street

Please use only letters (a-z or A-Z) or numbers (0-9) or spaces and # only in this field

validate-phoneStrict

Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890

validate-phoneLax

Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890

validate-fax

Please enter a valid fax number. For example (123) 456-7890 or 123-456-7890

validate-date

Please enter a valid date

validate-email

Please enter a valid email address. For example johndoe@domain.com.

validate-emailSender

Please use only letters (a-z or A-Z), numbers (0-9) , underscore(_) or spaces in this field.

validate-password

Please enter 6 or more characters. Leading or trailing spaces will be ignored

validate-admin-password

Please enter 7 or more characters. Password should contain both numeric and alphabetic characters

validate-cpassword

Please make sure your passwords match

validate-url

Please enter a valid URL. http:// is required

validate-clean-url

Please enter a valid URL. For example http://www.example.com or http://www.example.com

validate-identifier

Please enter a valid Identifier. For example example-page, example-page.html or anotherlevel/example-page

validate-xml-identifier

Please enter a valid XML-identifier. For example something_1, block5, id-4

validate-ssn

Please enter a valid social security number. For example 123-45-6789

validate-zip

Please enter a valid zip code. For example 90602 or 90602-1234

validate-zip-international

Please enter a valid zip code

validate-date-au

Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006

validate-currency-dollar

Please enter a valid $ amount. For example $100.00

validate-one-required

Please select one of the above options.

validate-one-required-by-name

Please select one of the options.

validate-not-negative-number

Please enter a valid number in this field

validate-state

Please select State/Province

validate-new-password

Please enter 6 or more characters. Leading or trailing spaces will be ignored

validate-greater-than-zero

Please enter a number greater than 0 in this field

validate-zero-or-greater

Please enter a number 0 or greater in this field

validate-cc-number

Please enter a valid credit card number.

validate-cc-type

Credit card number doesn’t match credit card type

validate-cc-type-select

Card type doesn’t match credit card number

validate-cc-exp

Incorrect credit card expiration date

validate-cc-cvn

Please enter a valid credit card verification number.

validate-data

Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.

validate-css-length

Please input a valid CSS-length. For example 100px or 77pt or 20em or .5ex or 50%

validate-length

Maximum length exceeded

Hope this will help you.

Thanks.