Javascript Validation Form in Magento

Magento Javascript Form Validation

In Magento there is default validation functionality for forms which then must be configured accordingly to get the specific results. All the JavaScript functions comes from form.js (js/varien/form.js) which is the main Prototype Javascript library.
To provide the form validation, form.js uses the Validation class which is part of the Prototype Javascript library.Each validation uses the specific class name to get the desired validation for input value accordingly.

Magento Custom Form Validation

First of all you need to add a Form (form.js) object to represent your site form with the below code.

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

Now by adding the above code in your custom form and create a form to provide the object to represent page respectively. As you have created a Javascript object to represent your form you need to add some validation rules to your form inputs respectively.

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

Notice the classes ‘required-entry’ and ‘validate-email’?  both classes 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 as per the errors accordingly.

Magento Javascript Validation Classes:

1. validate-select-:Please select an option from multiple given option.

2. validate-email-:Please enter a valid email address. For example example@domain.com.

3. validate-fax-:Please enter a valid fax number. For example (011) 123-9874.

4. validate-date-:Please enter a valid date.

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

6. validate-password-:Please enter 10 or more characters.

7. validate-admin-password-:Please enter 8 or more characters. Password should contain both numeric and alphabetic characters.

8. validate-cpassword-:Please make sure your passwords match.

9. validate-url-:Please enter a valid URL. Protocol is required (http://, https:// or ftp://).

10. validate-number-:Please enter a valid number in this field.

11. validate-date-au-:Please use this date format: dd/mm/yyyy. For example 21/10/2015.

12. validate-currency-dollar:-Please enter a valid $ amount. For example $50.00.

13. validate-one-required:-Please select one of the above options.

14. validate-cc-type-select-:Card type does not match credit card number.

15. validate-cc-exp-:Incorrect credit card expiration date.

16. validate-cc-cvn-:Please enter a valid credit card verification number.

17.validate-cc-number-:Please enter a valid credit card number.

18. validate-css-length-:Please input a valid CSS-length.

19. validate-length-:Maximum length exceeded.

20. validate-one-required-by-name-:Please select one of the options.

21. required-entry-:This is a required field.

22. validate-digits-:Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas.

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

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

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

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

27. validate-phoneStrict-:Please enter a valid phone number. For example (011) 123-456.

28. validate-phoneLax-:Please enter a valid phone number. For example (011) 123-456.

29. validate-clean-url-:Please enter a valid URL. For example http://www.abc.com or www.abc.com.

30. validate-identifier-:Please enter a valid Identifier.

31. validate-xml-identifier-:Please enter a valid XML-identifier.

32. validate-ssn-:Please enter a valid social security number.

33. validate-zip-:Please enter a valid zip code. For example 001212.

34. validate-zip-international-:Please enter a valid zip code.

35. validate-not-negative-number-:Please enter a valid number in this field.

36. validate-state-:Please select State/Province

37. validate-new-password-:Please enter 10 or more characters. Leading or trailing spaces will be ignored.

38. validate-greater-than-zero-:Please enter a number greater than 0 in this field.

39. validate-zero-or-greater-:Please enter a number 0 or greater in this field.

40. validate-cc-number-:Please enter a valid credit card number.

41. validate-not-negative-number-:Please enter a valid number in this field.

42. validate-greater-than-zero-:Please enter a number greater than 0 in this field.

43. validate-zero-or-greater-:Please enter a number 0 or greater in this field.

44. validate-state-:Please select State/Province.

43. validate-new-password-;Please enter 10 or more characters. Leading or trailing spaces will be ignored.

46. validate-cc-type-:Credit card number doesn’t match credit card type.

47. validate-cc-number-:Please enter a valid credit card number.

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