Îª1æ$_Ÿ„*f¯øQë¿¡È	tÑWY<›ÅÌ›&`óÉEQïÄk>z«¢¶ŸöfBðŠ(}8¹‡/ò6ë°ýÞ|ÞÃpçÐ‚Q¶ -FÐ)X:Ì›ÙW¦°¦½”­?R%÷¢_Fòö°Ðê ÌDø£{ù…IaÿyœbÂµ±»g:{ÛI@9­v{µŸ"gº÷KK%i¡D·³©›Yã¶óQ€og[Ãï¿q-þÔfýü‚âcH–"í(y*£~'»;Hl¸u)SŠ¤4 Ù*KÍôÓW¥Bji+’Rô¥-­]j#7ï}´kzµÁªµ6•6¢Xûé?\–sÓ¬˜á7ÓcbÔŽ[ô‹™jŸvVÚÁuŠŒÜà#?0êªpì0‘:d1Ä2¦b©#-žÖuÃ1äâ¬bß	»NE„ê}/ÂžÐÎ=U‡Ð…!77UBÑœ«ò‘læjB·Æz½«GF¹·Bc{)µ«ôy™¾­ÓžX5&@ÒÔj€€aN–„”Û×ÝÍ´¯ÓÌÚß¸uòö}1«-Ã§É1ðrxî¬€Töº_|ñâºÆ`P®ÆD£Æ¡Ÿ! 1	–•¤æV"¼ÕaÐaº.±Bg‘h¹Å¹ñ;–$’Ò%Ó3è Åz¥k&Z|à¼Úôe*Àü9Í·”¾þ:LžöÛkŠÊK˜tE[iw óÞŠ,mËVr,@­¦šÀø ^$ðîÛrô~ûÐçÍ|q©{Hx-«`€ÅÈž¥´ÛVØ+QÞTŸÞ¨&u[±”â§p§&yC»'‡9;<ož‘ŽâÓ‹
oiùà}¼Wl¥Û žnç+{‹Hå‘ÛÄ+SÃ<ÓênÙ"õ¶9dÎœ"'±¤$[Þl©`V¬Wfþñ±ŒÁ¸äŸ-l@»b§ôŒÆc¤¥ìk+Ë•­uóÕðÂšoU†ME¨òVéÿOùaýÙ¯ˆJv¬ê‹xJÊ‡y™ßGd†ür€vŠ¶Î+&m§ùX` ¯pU»1k«–g¡iÏE´_ò8“w»-ê£$ö¹B®j°ëñð&9¿)ÖˆK¼1‹UC¡¯sSäý~F‘Z”â×ì\0RO†±Áœ3oÃÉ¤wP`ƒ¼LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn Æq^.ÈïsåÑC C•¼Î©yšÏÁ¶òŒÛJ2(JOÞí´{@–¼—s J©¯Oj+½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇûü*Opõ318”cÇØgjÏ×>kÓL×T‹µ³¯…PUu‘º	Ôg]Dk{;ë(éY w2§m*])6"JÖ»¦5Aó®yÅÔ YAÌ·¾=§‰þ²µFÓ¿amº)ªZãXQÆÎÇx¹\ðÓ§Ð¥IZ®ú¦CÞc‹YiuDv¦_°ò/™Aú|#É4®úª/]]þƒq‘mÊU¡/Í³™T´K‰~yXšâw‹eÿÒÉ”h¤¹+‘]Ë	Oà[ÕeË?QµŸïLfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn y] [ôŸ0^r–˜°Fˆ]]™^{s’ÿ‘½Ph%ÚÓ<±¦ýÒ`‚økQ¶Èê–LfiÏåãBÿ)ˆ®Ýüô=S]+9‹3-§Ëò÷ßÞ@ôMú™(uHmÄn pn©Í”ý²ŠªNÅ#jqsVsûÅ,â“Óž¢Üs+Þí´{@–¼—s J©¯Oj+½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇûü*Opõ318”cÇØgÍš1Ù±¬;cŽ¬mùÖ¹[âÓ½ðn+}r¦G¨k`ì³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼ï×†yj±	»<ÆFÙÑ"±{Sú>ÙúƒÓ…/zêp®I×™‚u_eGZ¾Þí´{@–¼—s J©¯Oj+½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇûü*Opõ318”cÇØg½­°ãam¾¦`0D;³ïïû½	;øŒ\Om‚ü†‰6\2¿K»È˜­§¶’¡jõJH‰87]'Õ.x´|’+ÚÍ*oÌ*J*O…%¶ãÌ†Q\H–Ÿ?¤¬Ök«–g¡iÏE´_ò8“w»-ê£$ö¹B®j°ëÂâùd1=‡¨€Ô¢€ÊmOÄ	UP»E¤š¯6çrÇfþ ]VæGýåù9Ê²r¬7¦¿Ú×´¤`›€©€ ò<™H36åU[öèŸ‚¶k?®ß6d¯KŸqÅ¯×Îé"¶|ÆùÜz:ºc(ýúv,lïêþÈik¡QÁ´šÍpÚÛÝñƒ¾ØöÌRì°ÑÁ­†)¯V¹£ß´"Œ¨IÓQ2Õ'Fy´•I?è@xGv)»>•º§‹bc¡‹Q®YÁ™²|PW/IÞådå4ãá sâš®èLÌNý¼ûm¼â*j‰Â‚&#vû~ýúíÑÉIö™ jòþÂu™Ý2Àü¼``>’ªPêïˆŒ;µ îÐä÷`$?.¼ šé°Ž kÒ´âÏ¥1ïéØ¾¹ÃñºþYõí¹3ØTéS]ë,—PcÄ°ÉMÕýR Óö }l+!$Xï>	{Oô»=ëú_+> óDŽ#i“¾Zá\áÌ[3Ñ¹bÃë‰•|È*Šu¦5ƒ©òŽvOxÀUºÉA®)w½ŽÕ…žsŽÇ,™0Ö©éBëd«têâ*)Ó¡Õ©9‚y©Íãƒ(ûv¡SœÓåâ¬`)¸†…¶ 6rmEá„Áö	ÄÊ“§ Ì;°ºÚ™è4ÿ,…ŒCÚ²Åfp~FôÄÈ"¹M/
B’ù´ÿTJÃ(d«têâ*)Ó¡Õ©9‚Ï¸`m^˜ø·]ø 'Ù7ï§=Å/A¸'`ÆÂ=€)BæÛ´ÈaA"•œÓFâõÁ?7^ÁaJr>±m{›ð6>ýªïq‡­«½ÔäíŒ¢Ñd«têâ*)Ó¡Õ©9‚j¹ÄJK:J>V	NR´á¶ ?§ù	n–Û_KÈÇ[òW3^ÜƒPk/ü¹„£ÚD¦WU+~pcúwÒ&´$äC\G(9Œ6ï,»7î±nFµÇªO{~f¸ÚD¦WU+~pcúwÒNÕ¥\[Žl§ªµ^×'m'‹}åm7yŸŸ²toZ$)q
ƒßÇä,Ðo'|…›v9œ
Ë
ÿÃªfÌÊPÁ¨BC•Û.XÑšÑ2"*"AâaðOMò(±Q‘3àIl‚WÂ9qé4šme¯¹aùx:£3†v–'rX¿­’êh¢Ù4¾QÉáBä%Ö}!ó=ÒB‡€”"øW¦µÎàÐr¡LpœVËèÉÊÎó[œ]Ü÷g¢Ýþ"oS î;÷—q=ÇÉ³f,ßŸÛ8nnà&,ô‚`\ÍfÕJçÜ×3Gký>¡Ë³X?îø
“;Ž[C%3Ì³‰ã¶!-¤^©öžu`Œ¯6±÷×wÁA•1×Š*¢‚žW`–­hÞ(_î­C®ªøoúD¾î©~‚ÂrYE<¯îu˜_“¦s8R;i`_Êà÷Û8nnà&,ô‚`\Íf"Oëw‘ Ä¼Ååucr8};–¨5åîÝiµSå‹¤ŸvMõ@#"-„/Æ’¡()Çt&-2Ÿàý+1N‹ÍgL›pÐú­\¤q§èÊÕÜPŠÒ¬Þï"]“à7c6Ó€l0‚Àá!ä7”ðÙÝôdKºígu2®µm·ù*Òí(h&6E“·û±¢2ÀéH©­Åœ¯¶ñ¡TÑ¼šOùNG.%Ï¬8ÝÃ®>–¨5åîÝiµSå‹¤ŸvMdlŸoÞ»7U‚KìÚNpbdMÿÖ¼vß›¸ 8€š+B'hL™°£Ø¸c¤:ß¢roîrÃVòýß©,×ðOýÁç™áQöÐ—ñqÖ™Ãï7‹#C„¤	Ž˜WÅ¿›}ÌìV”ÊÞ%
“ãÂ¹˜W>{¹a“©}h0KêcÁósæñÃIâúùPê	½Ã–£F7qHDir6Kõô¢—î¾Æ^²ß#wêCØ5BMú.È#Þ~ïÈMêˆ>û]¹½0R![‚°™÷Iêd Hh&6E“·û±¢2ÀéH©­Åœ¯¶ñ¡TÑ¼šOùNG.%Ï¬8ÝÃ®>–¨5åîÝiµSå‹¤ŸvM„_×Pø©®ìª0zï-p»ø•_h
s°/$õŒu³^‘*E×¿g=!Áë%&{Í½>k5P­mÐøv!À5ö¾ÜÊ5	_ø9:{v{3p5àVëXE²`ù/À¤"-ÐØcFC™Ä¶ôêÜç’¢qÈ¿ŠsBÃó*‹«Û8nnà&,ô‚`\Íf2†‡‰³,ó?¡í‹¾z0¯+±èõÉ>ë‹îI¾û~\-Éy°Í{8‘†:ÌýÎÊµ¤Z¬0Ôœ¿ü £®QË–AŸÉÒŽ<ha°•^ØŸqHy°Ö’`‹~ðÁû™Ô"J?s›¹D›¶Â÷š0áV9—_Ê1•‘…6{èÇ¾(]~§ÑêlïÇ…Ç¼OT_LÉ>Ë’ÖQã_uµÛ8nnà&,ô‚`\Íf?\ºK.“ïÇ½>Žá*æµhÇ—–:srŽÚÞÎ*K1ñ²À.€5‚¿¢•2ÓËJ»&@ùAB„˜î—ÞÛ8nnà&,ô‚`\Íf^–6Ì„»fÝi[D-´g»ßN¬|ÊN {i$G^Im[“C}|–¨ÄxkF¡v5QŒðF[9¹C ßf)Ör	Þ¬¡¯Û"šÖyøN§O…Q‰ Ñ;á»eX”)¤Û8nnà&,ô‚`\Íf­ÊÅùÜÚûÕ¿Ç®Lg Û<”kâÏŸÄ†n=¢5œ}ˆdd+§Æ°¹-Ý}m““HuiÀÄZ(œÙi¨Mû™ï –•‰S¿{ÜfqÎËl€½”uöì6Û9ISX´ÿ´„ÏˆÍœL7\¿;yÅ†>ìî³*Xti
DQP‡^®N½Î†*h4§Û8nnà&,ô‚`\Íf¶m·X£a½íËz¸à' "¤"-ÐØcFC™Ä¶ôêg3> F#Žÿ©©§õNâÛ8nnà&,ô‚`\Íf	sò
ëé%’«æš<š¸Û8nnà&,ô‚`\Íf¤Æ1VM
KxsÄçöp¥ Ã+IH÷œª^Äoc.age: 'Password is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
                       { input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
                       {
                           input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input, commit) {
                               // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                               if (input.val() === $('#passwordInput').val()) {
                                   return true;
                               }
                               return false;
                           }
                       },
                       { input: '#emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
                       { input: '#ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
                       { input: '#phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
                       { input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' },
                       { input: '#acceptInput', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:0,0' }]
            });
        });
    </script>
    <style type="text/css">
        .text-input
        {
            height: 21px;
            width: 150px;
        }
        .register-table
        {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .register-table td, 
        .register-table tr
        {
            margin: 0px;
            padding: 2px;
            border-spacing: 0px;
            border-collapse: collapse;
            font-family: Verdana;
            font-size: 12px;
        }
        h3 
        {
            display: inline-block;
            margin: 0px;
        }
    </style>
</head>
<body class='default'>
    <div id="register">
        <div><h3>Register</h3></div>
        <div>
            <form id="testForm" action="./">
                <table class="register-table">
                    <tr>
                        <td>Username:</td>
                        <td><input type="text" id="userInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input type="password" id="passwordInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Confirm password:</td>
                        <td><input type="password" id="passwordConfirmInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Real name:</td>
                        <td><input type="text" id="realNameInput" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>Birth date:</td>
                        <td><div id="birthInput"></div></td>
                    </tr>
                    <tr>
                        <td>E-mail:</td>
                        <td><input type="text" id="emailInput" placeholder="someone@mail.com" class="text-input" /></td>
                    </tr>
                    <tr>
                        <td>SSN:</td>
                        <td><div id="ssnInput"></div></td>
                    </tr>
                    <tr>
                        <td>Phone:</td>
                        <td><div id="phoneInput"></div></td>
                    </tr>
                    <tr>
                        <td>Zip code:</td>
                        <td><div id="zipInput"></div></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding: 5px;"><div id="acceptInput" style="margin-left: 50px;">I accept terms</div></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;"><input type="button" value="Send" id="sendButton" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>