{"id":3201,"date":"2009-12-23T19:43:47","date_gmt":"2009-12-23T18:43:47","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=3201"},"modified":"2018-01-10T13:44:16","modified_gmt":"2018-01-10T12:44:16","slug":"mootools-formvalidator-demo","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2009\/12\/23\/mootools-formvalidator-demo\/","title":{"rendered":"Mootools FormValidator &#8211; Demo"},"content":{"rendered":"<div class=\"contentnavi\">\n<p class=\"contentnav1 center\">\n<a href=\"\/blog\/2009\/12\/14\/mootools-formvalidator-how-to-use-part-1\/\">Tutorial Part 1<\/a> &bull;<br \/>\n<a href=\"\/blog\/2009\/12\/28\/mootools-formvalidator-how-to-use-part-2\/\">Part 2<\/a> &bull;<br \/>\n<a href=\"\/blog\/2010\/01\/12\/mootools-formvalidator-how-to-use-part-3\/\">Part 3<\/a> &bull;<br \/>\n<a href=\"\/blog\/2010\/01\/19\/mootools-formvalidator-how-to-use-part-4\/\">Part 4<\/a> &bull;<br \/>\n<span class=\"pink\">Live demo<\/span>\n<\/p>\n<\/div>\n<p>An example form showing different uses of the MooTools FormValidator. For more information <a href=\"\/blog\/2009\/12\/14\/mootools-formvalidator-how-to-use-part-1\/\">view the blog entry &raquo;<\/a><!--more--><\/p>\n<p>\t<script type=\"text\/javascript\" src=\"\/blog\/wp-content\/themes\/chipwreck\/js\/mootools-1.2.5-core-yc.js\"><\/script><br \/>\n\t<script type=\"text\/javascript\" src=\"\/blog\/wp-content\/themes\/chipwreck\/js\/mootools-1.2.4.4-more-all-yc.js\"><\/script><br \/>\n\t<script type=\"text\/javascript\" src=\"\/blog\/wp-content\/themes\/chipwreck\/js\/chipwreck.js\"><\/script><\/p>\n<p>\t<script type=\"text\/javascript\"><\/p>\n<p>\t\twindow.addEvent('domready', function() {<\/p>\n<p>\t\t\t\/* FormValidator initialization *\/\n\t\t\tmyFormValidator = new Form.Validator.Inline($('register'), {\n\t\t\t\tstopOnFailure: true,\n\t\t\t\tuseTitles: true,\n\t\t\t\terrorPrefix: \"\",<\/p>\n<p>\t\t\t\tonFormValidate: function(passed, form, event) {\n\t\t\t\t\tif (passed) {\n\t\t\t\t\t\tform.submit();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tonElementValidate: function(passed, element, validator, is_warn) {\n\t\t\t\t\tif (element.get('name') == 'agb') {\n\t\t\t\t\t\tif (!passed) {\n\t\t\t\t\t\t\talert('Hey, the terms are really important!');\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});<\/p>\n<p>\t\t\t\/* register-button *\/\n\t\t\tif ($('registerbtn')) {\n\t\t\t\t$('registerbtn').addEvents({\n\t\t\t\t\t'click': function() { myFormValidator.validate(); }\n\t\t\t\t});\n\t\t\t}\n\t\t});<\/p>\n<p>\t\t\/* Custom Validator: optionalMinLength *\/<\/p>\n<p>\t\tFormValidator.add('optionalMinLength', {\n\t\t\terrorMsg: function(element, props) {\n\t\t\t\treturn 'Leave this empty or enter at least ' + props.optionalMinLength + ' chars';\n\t\t\t},\n\t\t\ttest: function(element,props) {\n\t\t\t\tif (element.value.length > 0 && element.value.length < props.optionalMinLength) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t}\n\t\t});\n\t\n\t\t\/* Custom Validator: alphaNumFix *\/\n\t\n\t\tFormValidator.add('alphaNumFix', {\n\t\t\terrorMsg: Form.Validator.getMsg.pass('alphanum'), \/\/'Please use only letters and numbers',\n\t\t\ttest: function(element,props) {\n\t\t\t\treturn Form.Validator.getValidator('IsEmpty').test(element) || (\/^[a-zA-Z0-9]+$\/).test(element.get('value'));\n\t\t\t}\n\t\t});\n\n\t\t\/* Custom Validator: emailUnique *\/\n\t\t\n\t\tFormValidator.add('emailUnique', {\n\t\t\terrorMsg: 'E-Mail address is already registered',\n\t\t\ttest: function(element, props) {\n\t\t\t\tif (element.value.length > 0) {\n\t\t\t\t\tvar uid = '';\n\t\t\t\t\tif ($type(props.userId)) {\n\t\t\t\t\t\tuid = props.userId;\n\t\t\t\t\t}\n\t\t\t\t\tvar req = new Request({\n\t\t\t\t\t\turl: '\/_mootools\/formvalidator\/formvalidator-ajax.php',\n\t\t\t\t\t\tasync: false\n\t\t\t\t\t}).send(\"mail=\" + element.value + \"&amp;uid=\" + uid);\n\t\t\t\t\treturn (req.response.text != '1');\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t}\n\t\t});<\/p>\n<p>\t<\/script><\/p>\n<style type=\"text\/css\">\n\t\t\/* some basic styling *\/\n\t\tform#register { padding: 10px; font: 14px\/18px Helvetica, Arial, sans-serif; margin: 20px 0px; border: 1px solid #444; }\n\t\tfieldset { position: relative; padding: 10px; border: 1px solid #ccc; }\n\t\tfieldset legend { font-weight: bold; font-size: 125%; text-transform: uppercase; }\n\t\tfieldset label { padding: 2px; display: inline-block; width: 180px; vertical-align: baseline; }\n\t\tfieldset textarea { vertical-align: middle; }\n\t\tfieldset input { padding: 2px; }\n\t\tfieldset span { font: 13px\/17px Helvetica, Arial, sans-serif !important; }<\/p>\n<p>\t\t\/* CSS classes used by the FormValidator  *\/\t\t\n\t\t.validation-passed { background-color: #99cc99 !important; } \/* input fields after successful validation *\/\n\t\t.validation-advice { background-color: #fffbcc; color: black; margin: 3px; padding: 3px; }  \/*  error messages *\/\n\t\t.validation-failed { background-color: #fffbcc; } \/* input fields after validation failed *\/\n\t<\/style>\n<form name=\"register\" method=\"post\" id=\"register\" action=\"#\">\n<fieldset id=\"registerfs\">\n<legend>Register DEMO<\/legend>\n<p>\t\t\t<label for=\"email\">Your E-mail address<\/label><br \/>\n\t\t\t<input class=\"emailUnique required validate-email\" type=\"text\" id=\"email\" name=\"profile[email]\" size=\"30\" maxlength=\"50\" \/><\/p>\n<p>\t\t\t<label for=\"firstname\">Firstname<\/label><br \/>\n\t\t\t<input type=\"text\" class=\"minLength:2\" id=\"firstname\" name=\"profile[firstname]\" size=\"25\" maxlength=\"50\" \/><br \/>\n\t\t\t<\/p>\n<p>\t\t\t<label for=\"lastname\">Lastname<\/label><br \/>\n\t\t\t<input type=\"text\" class=\"minLength:2\" id=\"lastname\" name=\"profile[lastname]\" size=\"25\" maxlength=\"50\" \/><\/p>\n<p><\/p>\n<p>\t\t\t<label for=\"gender\">You are&#8230;<\/label><br \/>\n\t\t\t\t<span id=\"gender\"><br \/>\n\t\t\t\t\t<input type=\"radio\" name=\"profile[gender]\" class=\"validate-one-required\" value=\"1\" \/>male<br \/>\n\t\t\t\t\t<input type=\"radio\" name=\"profile[gender]\" class=\"validate-one-required\" value=\"0\" \/>female<br \/>\n\t\t\t\t<\/span><\/p>\n<p>\t\t\t<label for=\"username\">Choose a Username<\/label><br \/>\n\t\t\t<input type=\"text\" class=\"alphaNumFix minLength:3 maxLength:30\" id=\"username\" name=\"profile[username]\" maxlength=\"30\" \/><br \/>\n\t\t\t<\/p>\n<p>\t\t\t<label for=\"username\">Postcode (optional)<\/label><br \/>\n\t\t\t<input type=\"text\" class=\"optionalMinLength:5\" id=\"postcode\" name=\"profile[postcode]\" maxlength=\"6\" \/><br \/>\n\t\t\t<\/p>\n<p>\t\t\t<label for=\"password\">Password (3 chars or more)<\/label><br \/>\n\t\t\t<input type=\"password\" class=\"minLength:3\" id=\"password\" name=\"profile[password]\" maxlength=\"30\" \/><br \/>\n\t\t\t<\/p>\n<p>\t\t\t<label for=\"password2\">Password (again)<\/label><br \/>\n\t\t\t<input type=\"password\" class=\"required validate-match matchInput:'password' matchName:'Password'\" id=\"password2\" name=\"profile[password2]\" maxlength=\"30\" \/><\/p>\n<p>\t\t\t<label for=\"agb\">I agree to the <a href=\"#\">terms of service<\/a><\/label><br \/>\n\t\t\t<input type=\"checkbox\" class=\"validate-required-check\" title=\"Please agree to the terms of service.\" name=\"agb\" id=\"agb\" value=\"1\" \/><\/p>\n<div>\n\t\t\t\t<button type=\"button\" id=\"registerbtn\">Register (demo)<\/button>\n\t\t\t<\/div>\n<\/fieldset><\/form>\n<p>Back to <a href=\"\/blog\/2009\/12\/14\/mootools-formvalidator-how-to-use-part-1\/\"><q>How to use the Mootools FormValidator<\/q> &raquo;<\/a><\/p>\n<h4><strong>Comments\/Feedback? Now collected in <a href=\"\/blog\/2010\/01\/19\/mootools-formvalidator-how-to-use-part-4\/\">part 4 &raquo;<\/a><\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>An example form showing different uses of the MooTools FormValidator. The blog post &#8220;Mootools FormValidator&#8221; explains this in depth.<\/p>\n","protected":false},"author":2,"featured_media":3265,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[10,54],"class_list":["post-3201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-mootools","tag-track"],"jetpack_featured_media_url":"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/12\/mootools-demoform.png","jetpack_shortlink":"https:\/\/wp.me\/paPEN-PD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3201","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=3201"}],"version-history":[{"count":1,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3201\/revisions"}],"predecessor-version":[{"id":8159,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/3201\/revisions\/8159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media\/3265"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=3201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/categories?post=3201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/tags?post=3201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}