Out of the box Form Validation in Magento

Featured Image

One of the coolest things in Magento is a form validation, and the way how it’s done. Magento uses Prototype library (which, personlay, I’m not a big fan of) to manage form validation. All you need to do when writing custom form is to assign a valid class names to your input fields. Here is an example of how your custom form might look in order to get use of automatic form validation.

<form name="<em><strong>my-custom-form</strong>" id="my-custom-form" action="" method="post">
<label for="firstname">< ?php echo $this->__('First name') ?> <span class="required">*</span></label><br />
<input id="firstname" name="firstname" class="<em/><strong>input-text required-entry</strong>" />
<label for="lastname">< ?php echo $this->__('Last name') ?> <span class="required">*</span></label><br />
<input id="lastname" name="lastname" class="<em/><strong>input-text required-entry</strong>" />
<label for="useremail">< ?php echo $this->__('Email') ?> <span class="required">*</span></label><br />
<input type="text" name="useremail" id="useremail" class="<em/><strong>input-text required-entry validate-email</strong>" />
<input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />
</form>< ?php /* END OF my-custom-form */?>
<script type="text/javascript">
//< ![CDATA[
var customForm = new VarienForm('<em><strong>my-custom-form</strong>');
//]]>
</script>

You will notice all of the input fields have one common class name, required-entry. I’m not gonna go over all of the available class names here. To find available class names, try going to One page checkout page, where you have checkout form, then simply view source and look for class names next to input, radio select and other fields.

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 thats it. Constructing the form this way, automaticaly makes your form reuse already existing validation code, the one that the rest of the shop is using.

35
Top

Care to rate this post?

Author

Branko Ajzele

Ex Inchooer

Worked at Inchoo as a Backend Developer/CTO from 2008 to 2013

Other posts from this author

Discussion 35 Comments

Add Comment
  1. Nice stuff..

    A bit OT: You think it is possible to completely
    drop most of the Prototype, and the other included
    javascript, and use jQuery only?

    If someone did the “Blank” theme
    jQuery only I would be the first in line to buy.

  2. Joachim

    At the first line you wrote “name=”my-custom-form” id=”my-custom-form”” The validation works on the ID and not on the name of the form.

  3. @Joachim

    Thank you for “enlightenment”. I emphasized the wrong attribute. Example still works.

  4. Sowmya

    Can I do in the same way in admin side also.
    I tried doing, but not getting the validation message.

  5. Yes, actually you can do this on the admin side as well. I created a form which had a ‘class’ => ‘validate-number’ as part of the field I added and it correctly validates. However, I’m not sure whether this would still hold for a malicious person trying to intentionally POST data to the form. Javascript is a good way to ‘assist’ users in submitting good data, but server side validation is imperative in preventing bad users from submitting malformed data. I’m still looking for a server side solution to validation.

  6. Himanshu Gupta

    Hello sir,
    I need alert message of register form in magento in the upmost side if the webpage.

  7. Toni Anicic

    @Himanshu Gupta – Cool, I need a house in Beverly Hills.

  8. is there some way to write a custom form validation rule ?

    like if i want that every valid-email shouldn’t belong to google.com (e.g ahsan@google.com shouldn’t be a valid email address).

    This is some sort of enhancements for valid-email rule.

    any comments ???

  9. its good ..

  10. Thanks Simply Superb!!!!!!!!

  11. Funny, looking for an other problem in Google I found again your site :)

  12. Toni Anicic

    @quicoto, yea, we get that a lot :)

  13. itos

    not working in admin area. javascript error.

    VarienForm is not defined

  14. Tejas

    Works well for me ;)

  15. Mohsin

    How to apply custom validation?

    Same problem as @Ahsan….

  16. AK

    thanks branko

  17. wonwiz magento form validation plugin, using jQuery only, http://wonwiz.blogspot.com/2010/08/jquery-form-validation-plugin-for.html

  18. Anything on custom validation?? Same as Ahsan

  19. smith75

    One of the coolest things in Magento is a form validation, and the way how it

  20. @itos
    validate admin are needs Form.js so..you must import from your_module.xml

    varien/form.js

  21. Mike

    You are awesome!! Thanks for the code!!!

  22. To get all available class names simply view the source of js/prototype/validation.js

  23. For anyone else who came here searching custom validation, I finally found a resource: http://blog.baobaz.com/en/blog/custom-javascript-form-validators

  24. Adrian

    I know this is an old blog post, but I thought I’d ask anyway.

    In the mini-search form there is a default value which disappears when the input is in focus. I am trying to add this feature to my Newsletter Subscription form but I can’t get it to work. Tried this, but no cigar…

    var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail', false, 'Email Address...');

    Can anyone help?

  25. Pravin

    @Adrian

        var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
       new Varien.searchForm('newsletter-validate-detail', 'newsletter', '<?php echo $this->helper('newsletter')->__('e-mail here') ?>');
    	newsletterSubscriberFormDetail.bindElements('');
    
  26. Kamal

    I have added lightwindow and displayed a page which includes newsletter subscriber form. But email validation is not working in it. Any help? TIA

  27. @pravin – awesome – thanks!

  28. Jamie Kahgee

    How do you do server side validation and then repopulate the fields if it fails?

  29. Thanks, I have my form validating now.

  30. DanCapitanDePlai

    I have a small issue regarding checkout validation. If i click the submit button without completing all the fields,i get the “this is a required field” text.
    But after i go back and fill the required ( and empty ) fields the submit button is dead.
    I dont know too much javascript and im having a really hard time with this error i cant resolve.
    Ever happend to you? Do you know why this is happening?

  31. Can we validate fields before submitting the form

  32. Anil Kumar Singh

    Great, you tips came in handy,
    Thanks

  33. Hello Inchoo,
    I had a newsletter problem. I want a copy of newletter which work other that footer section. one in footer is working fine. But when i create a new files which is copy of same subscribe.phtml file and call that file in my main home page file like this. getLayout() ->createBlock(‘newsletter/subscribe’)->setTemplate(‘newsletter/subscribe.phtml’)->toHtml(); ?> then the subscribe button don’t work.

    Simply i want to ask that i want a copy of newsletter file which also need to work in content area on home page.

    The home page i had created is a html design and i called that HTML by using layout in CMS section like this ”

    Hope now you got my problem. Please let me know a solution thanks

  34. Nice tutorial!

    Is there are way to test if form is validated or not something like if(myform.validate()) alert(‘Wow!’);

    Waiting for your kind response….

  35. khalil

    I am trying to validate my new fields in custom contact form, here is my link for the form:

    http://www.cabas-durables.fr/magento/index.php/custom-contact/index/

    I included the form id in the line: var contactForm = new VarienForm(‘customcontacts’, true);

    and I made every input with class like that:

    <input class="required-entry input-fields" name="country" id="country" title="__(‘Pays’) ?>” value=”" type=”text” />

    But when I try to submit without filling in these fields, it submitts the form and sending email without any error.

    I hope any someone can help with this.

    Thanks

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top