{"id":2745,"date":"2009-12-14T22:22:12","date_gmt":"2009-12-14T21:22:12","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=2745"},"modified":"2016-12-31T02:09:16","modified_gmt":"2016-12-31T01:09:16","slug":"mootools-formvalidator-how-to-use-part-1","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2009\/12\/14\/mootools-formvalidator-how-to-use-part-1\/","title":{"rendered":"Mootools FormValidator – How to use (Part 1)"},"content":{"rendered":"
\n

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

One of the nicest Mootools.more components is the FormValidator<\/a> – but the documentation is incomplete and IMHO not very easy to comprehend.<\/p>\n

After using the FormValidator a lot, I decided to begin writing a tutorial in several parts. <\/p>\n

Overview<\/h2>\n

Note: MooTools more version 1.2.4+ is being used.<\/em><\/p>\n

First have a look at the example: Form Validation Demo »<\/a><\/p>\n

Each input-field in the form can have a list of validators. A validator checks one specific aspect, for example minimum length. There are a lot of pre-defined validators (see mootols\/docs).<\/p>\n

To make validation nearly automatic, we initialize an instance of FormValidator.Inline for the form.<\/p>\n

FormValidator initialization<\/h2>\n

First we initialize the FormValidator.Inline-object. The first parameter is the CSS-id of the form, the second parameter are options:<\/p>\n

stopOnFailure<\/strong> means this: If one validation fails, all other fields are temporarily\tignored. This is more user-friendly – otherwise clicking through the fields would show one error message after another..<\/p>\n

useTitles<\/strong> allows us to overwrite the error messages with the title-attribute, you can see this in the last field (“terms of service”) – where we show a custom message.<\/p>\n

errorPrefix<\/strong> is a text that is shown before all error messages, defaults to “Error: “. But an error message is enough, no need to repeat that it’s an error, so I set to an empty string.<\/p>\n

The onFormValidate<\/strong> method is called if everything is all right – in this case, we submit the form.<\/p>\n

onElementValidate<\/strong> is called after each Validation. This is useful to handle some fields specifically – here for demonstration purposes: An annoying alert.<\/p>\n

\r\nwindow.addEvent('domready', function() {\r\n\tmyFormValidator = new Form.Validator.Inline($('register'), {\r\n\t\tstopOnFailure: true,\r\n\t\tuseTitles: true,\r\n\t\terrorPrefix: \"\",\r\n\t\t\t\t\r\n\t\tonFormValidate: function(passed, form, event) {\r\n\t\t\tif (passed) {\r\n\t\t\t\tform.submit();\r\n\t\t\t}\r\n\t\t},\r\n\r\n\t\tonElementValidate: function(passed, element, validator, is_warn) {\r\n\t\t\tif (element.get('name') == 'agb' && !passed) {\r\n\t\t\t\talert('Hey, the terms are really important!');\r\n\t\t\t}\r\n\t\t}\r\n\t});\r\n});\r\n<\/pre>\n
Field validation<\/h2>\n
All validators for a field are simply listed as classes, here an example:<\/p>\n
<input class=\"required validate-email emailUnique\" type=\"text\" name=\"profile[email]\" \/>
\n<\/code><\/p>\n
Here three rules are applied:<\/p>\n