Magento How to validate my forms

Javascript Validation in Magento

We can make a validation of a form in Magento in many ways. Although the trend is to use JQuery libraries in most of websites, I’m going to explain the easiest way to make it in Magento.That is, using default Magento Javascript framework, the prototype, instead of JQuery. This framework uses similarly to JQuery, but as it comes with default instalation of Magento, using prototype save your time and quantity of code.
I put title “How to validate my forms in Magento”, maybe it would be better “How to validate my form using prototype”, as we can apply to any form in any web even Magento, simply making previous call to prototype.

The best way to explain this is with an example, La mejor forma de explicar esto es con un ejemplo, suppose our form:


<form id="testform" method="post" name="form"><label for="name">
<?php echo $this->__('Name') ?> <span>*</span></label>
<input id="name" class="input-text  required-entry" type="text" name="name" />
<label for="lastname">
<?php echo $this->__('Lastname') ?> <span>*</span></label>
<input id="lastname" class="input-text   required-entry" type="text" name="lastname" />
</form>

Next, run this bit of javascript to turn your plain old form into VarienForm


<script type="text/javascript">
//<![CDATA[
    var theForm = new VarienForm('testForm', true);
    Validation.add('validate-must-be-baz','You failed to enter baz!',function(the_field_value){
        if(the_field_value == 'baz')
        {
            return true;
        }
        return false;
    });
//]]>
</script>


It’s easy, isn’t it? We only have to define class attribute in each input to validate and go. First, we put style class to apply (input-text), second the validation feature (required-entry). For this example I only used the property required-entry, that forces user to introduce something. Let’s have a look at complete table that allows VarienForm class of prototype:

Class name	Validation
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-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.