{"id":3720,"date":"2010-01-19T19:13:50","date_gmt":"2010-01-19T18:13:50","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=3720"},"modified":"2016-12-31T01:32:55","modified_gmt":"2016-12-31T00:32:55","slug":"mootools-formvalidator-how-to-use-part-4","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2010\/01\/19\/mootools-formvalidator-how-to-use-part-4\/","title":{"rendered":"Mootools FormValidator \u2013 How to use (Final Part)"},"content":{"rendered":"
\n

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

How to use Mootools Formvalidator effectively – a tutorial in 4 parts<\/p>\n

This additional part contains stuff that didn’t fit in the previous parts and things I’ve been asked (or asked myself) afterwards.<\/p>\n

Optional minimum length<\/h2>\n

Imagine something like this: A user can enter her postcode (which by any weird definition has to contain at least 5 characters) but isn’t required to. So the field can either be empty or – if it’s filled – it has to contain 5 or more characters.<\/p>\n

A custom validator could look like this:<\/p>\n

\r\nFormValidator.add('optionalMinLength', {\r\n\terrorMsg: function(element, props) {\r\n\t\treturn 'Leave this empty or enter at least ' + props.optionalMinLength + ' chars';\r\n\t},\r\n\ttest: function(element,props) {\r\n\t\tif (element.value.length > 0 && element.value.length < props.optionalMinLength) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\treturn true;\r\n\t}\r\n});\r\n<\/pre>\n
Usage:<\/p>\n
\r\n   <input type=\"text\" name=\"postcode\" class=\"optionalMinLength:5\" \/>\r\n<\/pre>\n
How does it work? The test function is similar to the ones before: First we check if our element has a length of at least one - if so (something is filled in) we compare it to our property (here: optionalMinLength<\/kbd>). And if the element is too short, the test fails.<\/p>\n
One thing to notice here is the error message<\/strong> - instead of using a simple text we can apply the same arguments to the function as we use for the test method: The element and properties. So we can print our error message dynamically by inserting the number of required characters.<\/p>\n
Shipping Address Example<\/h2>\n
Depending on a user selection, some fields might change their required-status. A common example would be a shopping cart where you select Ship to another address<\/q> - in this case the shipping address fields would become required.<\/p>\n
This works out-ouf-the-box if you include the Form.Validator.Extras-package. Here's an example:<\/p>\n
\r\n<label for=\"shipping\">Ship to a different address?<\/label>\r\n<input type=\"checkbox\" class=\"validate-toggle-oncheck toToggleChildrenOf:'shippingfields'\" id=\"shipping\" name=\"profile[shipping]\" \/>\r\n\t\t\t\r\n<div id=\"shippingfields\">\r\n\t\t\t\r\n\t<label for=\"ship_street\">Shipping address<\/label>\r\n\t<input type=\"text\" class=\"required\" id=\"ship_street\" name=\"profile[ship_street]\" \/>\r\n\r\n\t<label for=\"ship_city\">Shipping city<\/label>\r\n\t<input type=\"text\" class=\"required\" id=\"ship_city\" name=\"profile[ship_city]\" \/>\r\n\r\n<\/div>\r\n<\/pre>\n
The validate-toggle-oncheck<\/kbd> validator toggles all the fields which are children of the ID you provide. In this case we simply added a DIV with the ID \"shippingfields\" and put all the fields which depend on this checkbox insde.<\/p>\n
So if the checkbox is not selected, the shipping address-fields are ignored - otherwise they are validated.<\/p>\n
You can also provide a list of fields to toggle:<\/p>\n
\r\n\t<input type=\"checkbox\" class=\"validate-toggle-oncheck toToggle:['ship_street','ship_city']\" id=\"shipping\" name=\"profile[shipping]\" \/>\r\n<\/pre>\n
Shipping address improved<\/h3>\n
The previous example has one small disadvantage when it comes to usability: If you'd like to mark required fields with a *<\/q> you can't put the asterisk on the shipping address fields, since that depends. But we can improve the general usability by simple toggling their visibility:<\/p>\n
\r\n<label for=\"shipping\">Ship to a different address?<\/label>\r\n<input type=\"checkbox\" onclick=\"$('shippingfields').toggleClass('hidden')\" class=\"validate-toggle-oncheck toToggleChildrenOf:'shippingfields'\" id=\"shipping\" name=\"profile[shipping]\" >\r\n\t\t\t\r\n<div id=\"shippingfields\">\r\n\t\t\t\r\n\t<label for=\"ship_street\">Shipping address<\/label>\r\n\t<input type=\"text\" class=\"required\" id=\"ship_street\" name=\"profile[ship_street]\" \/>\r\n\r\n\t<label for=\"ship_city\">Shipping city<\/label>\r\n\t<input type=\"text\" class=\"required\" id=\"ship_city\" name=\"profile[ship_city]\" \/>\r\n\r\n<\/div>\r\n<\/pre>\n
The CSS-class hidden is defined as display:none<\/kbd><\/p>\n
<\/p>\n
More to follow....<\/p>\n","protected":false},"excerpt":{"rendered":"
How to use Mootools Formvalidator effectively – a tutorial in 4 parts.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[55,10,54],"class_list":["post-3720","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript-mootools","tag-mootools","tag-track"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paPEN-Y0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=3720"}],"version-history":[{"count":0,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3720\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=3720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/categories?post=3720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/tags?post=3720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}