As you know, Magento uses Prototype as javascript library. It provides a simple way to validate html form values.
Read more: Magento 2 news 2016
Below is an example:
<form name="my-form" id="my-form" method="post">
<label for="firstname">
< ?php echo $this->__('First name') ?> <span>*</span></label><br />
<input id="firstname" name="firstname" class="input-text required-entry"/>
<label for="lastname">
< ?php echo $this->__('Last name') ?> <span>*</span></label><br />
<input id="lastname" name="lastname" class="input-text required-entry"/>
</form>
<script type="text/javascript">
//< ![CDATA[
var customForm = new VarienForm('my-form');
//]]>
</script>
In the form above you can see each input field has its own class name and these classes will be used to validate field’s value. There are many predefined classes like that in prototype lib. I’ll show you all of them at the end of this topic.
Most important thing besides assigning class names is that little piece of JavaScript below the form. Remember to pass form id into the new VarienForm object.
Basically, that’s it. Constructing the form this way, automatically makes your form reuse already existing validation code which is being used by the rest of the shop.
Below is a full list of validate class and its error message that I found in prototype lib.
| Validate Class | Meaning |
| 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. |
Hope this Magento tutorial helps.
[yellowbox]Exclusive bonus: Generates Affiliate programs that attract hundreds of referrals to promote your products and earn commission[/yellowbox]We will update Magento tutorial regularly, especially about Magento 2. Let’s subscribe to our blog to be the first one catch up with the latest news by leaving your email below.
[mc4wp_form]
12 Comments
@Kasey: Sure, please go ahead. Thanks!
Very thankful. For giving this information.
i have one problem. how i control the width of input fields on form.
$fieldset->addField(‘product_id’, ‘text’, array(
‘label’ => Mage::helper(‘productmapping’)->__(‘Product Id’),
‘class’ => ‘required-entry’,
‘required’ => true,
‘name’ => ‘product_id’,
‘width’ => ’50px’,
));
but the width as it is same.
It is very useful information. really thanks.
Can i have one of the sample coding of all this validation field used?
Hi,
Thank you very much to share this information. Really appreciated.
Hi,,
This blog is very useful ..
This helps me & save my time …
Thanks …
Keep Rockin
Hello Sir, I have one question i have added one extra filed in subscribe.phtml
SPECIAL OFFERS & DISCOUNTS
Sign up to our newsletter to receive special offers and discounts on Magic Bra and Eden House products
<form action="getFormActionUrl() ?>” method=”post” id=”newsletter-validate-detail”>
<input type="text" name="email" id="newsletter" title="__(‘Sign up for our newsletter’) ?>” class=”textField required-entry validate-email” onblur=”if(this.value==”)this.value=’Email Address’;” onfocus=”if(this.value==’Email Address’)this.value=”;” value=”Email Address” />
//
I am not able to validate name filed please help !!!
@Nayan: You have to define a varien object for your form. You can see the example in newsletter/subscribe.phtml file.
var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');I want to Validate password fields while current password field has value in magento
The detail question is asked here
http://stackoverflow.com/questions/7944854/validate-password-fields-while-current-password-field-has-value-in-magento
please help me to solve this problem
How to control the form.submit() in the varien form validations.
Can you update me on how to use validate-ajax method?
Hi,
You can write your own submit function of your form by using the code below (used for blog’s samplage):
customForm.submit = function (){
// Your validate code before Submit form
// can use ajax to validate
}
Hope it helps!
Nice blog 🙂
In the code what’s the meaning of this line < ![CDATA[