Prototype Javascript validation in Magento forms

In this article, we are going to discuss about How to use the prototype javascript validation in Magento forms. Using Javascript validation in forms will improves the usability and efficiency of the website. It will leads to a better web 2.0 look and feel.

Javascript Validation in Magento

In Magento, they are using the form.js (js/varien/form.js) file to provide the abstract JavaScript functions for forms by default. To achieve this validation, form.js uses the Validation class which is part of the Prototype Javascript library. It works by checking form inputs for certain class names. Each class name tells the validator to perform certain checks on the value inside the input.

Custom Form Validation

Adding Javascript validation to your own forms is extremely simple. First, you need to create a Form (form.js) object to represent your form.

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

The first parameter, in this case formId, is the ID of your form.

The second parameter defines whether or not the first input field in the form should steal the cursor focus. If set to true, the cursor will automatically be moved into the first input field and any user input will be entered into this field. You can disable this functionality by setting the second parameter to false.

Now that you have created a Javascript object to represent your form you need to add some validation rules to your form inputs.

<label for="name">Name *</label>
<input type="text" id="name" name="name" value="" class="required-entry"/>
<label for="email">Email Address *</label>
<input type="text" id="email" name="email" value="" class="required-entry validate-email"/>

Notice the classes 'required-entry' and 'validate-email'? These both tell the classes to apply certain validation rules on the input fields. If any of the validation checks fail, the form will not be submitted and the user will be alerted to the errors.

Magento Javascript Validation Classes

There are many more validation classes you can assign and I list them here as a reference. For more information on this please use Google, experiment with the code or contact me via my email or the contact form.

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 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