Extending Prototype Validation within Magento's Front-end



Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

 

In this post I would like to show you how to extend Magento's built-in prototype validation classes used on the front-end of the site to validate input fields. This is particularly helpful when creating custom regular expressions to accept a variety of characters and words within an input field in Magento that has not been included or created for specialised input fields.


The first step is to tell Magento you are extending its prototype validation class and to include your custom javascript file in a safe upgrade. In your Theme Layout directory you will need:

App/Design/Frontend/[Magento Build]/[Theme Name]/layout - In my case it would be - App/design/frontend/enterprise/mom/layout.

Find the page.xml file and include the following line of code [highlight class="blue"]after[/highlight] the prototype/validate.js. This is [highlight class="blue"]essential[/highlight] for your code to work.

[pre]<action method="addJs"><script>invent/custom.js</script></action>[/pre]   

Create a custom.js file and place it in /js/[theme]/custom.js

 

The contents of custom.js

//Custom validation for Company + Last Name + First Name fields in registration forms

if(Validation) {

   Validation.add AllThese ([

    ['validate-mixed',                                                      //class name  

 

     Your input field can only contain A-Z and include spaces, / _ or -',  //Error message to the user

                             function (v) {

     return Validation.get('IsEmpty').test(v) || /\b\w+[\w\.\-\'\"\s&]+\w+$/.test(v)  //validation of input, 'v' being the input.

                             }

                            ],                         

                            ['validate-xml',

                             'Field must be formatted XML',

                             function (v) {

                               return Validation.get('IsEmpty').test(v) || /\i\c*/.test(v)

                             }

                            ]

                           ])

}

When I am doing this firstly I check if the Validation object exists, next I use a method called ‘AddAllThese’ which forms part of the Validation object in order to allow for additional validation classes. 

In this example I have included two new validation classes, one for Company names / first names or last names and one for XML Tags. In this post I am only covering the first expression. The second expression is merely there as an example to show you how to add multiple validation classes.

To [highlight class="blue"]test[/highlight] this validation, you would add [highlight class="blue"]'validate-mixed'[/highlight] to a class of an input element on a magento form, for example:

[pre]<input class="input-text required-entry validate-mixed" name="firstname" value="1" type="text" />[/pre]

This tells Magento to use our newly created Validation class named 'validate-mixed'. As you can see after the || in return Validation.get('IsEmpty').test(v) ||becomes a regular expression: 

/\b\w+[\w\.\-\'\"\s&]+\w+$/

This regular expression will match words and characters and return either true or false. If the result is true, the validation is passed, if the result is false, the message provided in your validation class will be displayed to the user. 

'v' in the function provided above is the input string.

.test(v) will return True or False if the input value corresponds to the regular expression provided.

To create your own RegEx's, I recommend using Regexbuddy to generate the expression, debug and test. [icon class="icon-link"][/icon] http://www.regexbuddy.com/

And that's it! Simple and effective.[icon class="icon-thumbs-up"][/icon]

 

 

 

 


© 2019 SQLI LTD. All Rights Reserved.