Prototype Javascript Validation In Magento Forms



Suppose you are developing a custom form in Magento and wants to use the default Magento form validation functionality, for the form validation Magento uses a file named as form.js (js/varien/form.js) which provide abstract Javascript functions for forms. To provide the form validation, form.js uses the Validation class which is part of the Prototype Javascript library. It works on the basis of by checking form inputs for certain class names. Each css class name tells the validator to perform certain checks on the value inside the input. In this post I am trying to describe the Magento Custom form validation by using the Prototype Javascript.

Validation for the Custom Forms :

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

For doing this just add the above code in your custom form and create a Form to provide the object to represent your form. In the above example I have taken the form Id customForm, just replace the form Id with your actual one.

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

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

In the above example the classes “required-entry” and “validate-email”, tells the prototype 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.

There are alot of classes which is used to validate the form, you can assign them in your custom forms:

1. validate-select
Please select an option

2. validate-fax
Please enter a valid fax number. For example (222) 123-4567

3. validate-date
Please enter a valid date

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

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 6 or more characters.

7. validate-admin-password
Please enter 7 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.

10. required-entry
This is a required field

11. validate-number
Please enter a valid number in this field

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

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

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

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

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

17. validate-phoneStrict
Please enter a valid phone number. For example (222) 333-4423

18. validate-phoneLax
Please enter a valid phone number. For example (222) 333-4423

19. validate-clean-url
Please enter a valid URL. For example https://www.expertwebadvisor.com or www.expertwebadvisor.com

20. validate-identifier
Please enter a valid Identifier.

21. validate-xml-identifier
Please enter a valid XML-identifier.

22. validate-ssn
Please enter a valid social security number.

23. validate-zip
Please enter a valid zip code. For example 201301

24. validate-zip-international
Please enter a valid zip code

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

26. validate-state
Please select State/Province

27. validate-new-password
Please enter 6 or more characters. Leading or trailing spaces will be ignored

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

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

30. validate-cc-number
Please enter a valid credit card number.

31. validate-date-au
Please use this date format: dd/mm/yyyy. For example 21/05/2013

32. validate-currency-dollar
Please enter a valid $ amount. For example $100.00

33. validate-one-required
Please select one of the above options.

34. validate-cc-type-select
Card type doesn’t match credit card number

35. validate-cc-exp
Incorrect credit card expiration date

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

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

38. validate-css-length
Please input a valid CSS-length.

39. validate-length
Maximum length exceeded

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

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

42. validate-state
Please select State/Province

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

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

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

46. validate-cc-number
Please enter a valid credit card number.

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

This is all about the Form validation by using the Prototype.js (default Magento Form validation). Thanks an enjoy the reading.