{"id":2764,"date":"2009-12-28T20:30:12","date_gmt":"2009-12-28T19:30:12","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=2764"},"modified":"2017-01-11T14:02:39","modified_gmt":"2017-01-11T13:02:39","slug":"mootools-formvalidator-how-to-use-part-2","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2009\/12\/28\/mootools-formvalidator-how-to-use-part-2\/","title":{"rendered":"Mootools FormValidator – How to use (Part 2)"},"content":{"rendered":"
\n

\nTutorial Part 1<\/a> •
\nPart 2<\/span> •
\nPart 3<\/a> •
\nPart 4<\/a> •
\nLive demo<\/a>\n<\/p>\n<\/div>\n

This part of the tutorial shows how to trigger the form validation with a link or button and how to build a custom validator.<\/p>\n

Submit button<\/h2>\n

Our “register”-button has no default behaviour, so we add an event which validates and submits the form.<\/p>\n

We first check if the button exists – this is a good practice, since it’s possible that the same page is loaded without the form (for example if the form was submitted and the page now contains “Thanks for registering.” – but no form anymore).<\/p>\n

If the button does exist, we add a click-Event: Namely calling the validate()-method of the FormValidator, which checks all the values and then submits the form:<\/p>\n

\r\nif ($('registerbtn')) {\r\n\t$('registerbtn').addEvents({\r\n\t\t'click': function() { myFormValidator.validate(); }\r\n\t});\r\n}\r\n<\/pre>\n
<\/div>\n
Custom validators<\/h2>\n
How to create a custom validator<\/h4>\n
There are lots of validators present in the mootools-package, but you may soon encounter a situation where none of these is sufficient. Like here:<\/p>\n
The username should consist of numbers and letters only. There is a validator called “validate-alphanum” already present in the mootools package, but it allows underscores! That’s not what we want.<\/p>\n
(This has something to do with regular expressions and might be called a bug, but regardless, we fix it by creating a new validator).<\/small><\/p>\n
A validator consists of a name<\/strong>, an error-message<\/strong> and a test-method<\/strong> which does the validation. So we create a custom validator called “alphaNumFix”, here our first try:<\/p>\n
The error-message simply returns a string, the test method has two arguments: the element being tested and additional properties. To check if the given element only consists of numbers and letters, we use a simple regular expression, into which we feed the element value:<\/p>\n
\r\nFormValidator.add('alphaNumFix', {\r\n\terrorMsg: 'Username wrong',\r\n\ttest: function(element, props) {\r\n\t\treturn (\/^[a-zA-Z0-9]+$\/).test(element.get('value'));\r\n\t}\r\n});\r\n<\/pre>\n
After trying this out we soon realize two problems:<\/p>\n