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.