%Ÿ¤´ÿ(”<U5$¹KU§
Zeª*…ê/> #s$8Ï6p–Œþñy!¦ƒø7CÔ_~aìÊy÷	_ÍçºüøïEÄSBÈ½E¶],jÐã¿ãÄëòÀÊeë,5sq,+ÂyzçKy÷óáÕî¾ÏG®º6¥eãÁ‚›}oŸ„ú=S9¦ø’Å’j>À’áryd<|«MÂwÀ¢ZxgF5pÛþPß7¿õ!ã2¶ÕÛ ³_y»ýèB:æ CóNqsýËÈy5^[PFøLuöÜ=Í:L(Î·»„píl<¥»ëN“4s¦¤£yÝ‡%’287a”E‘1eˆOøêèDÈ5@×žæ4§‘:¥ýþÇ"½PâÝ°Ì†ú˜œ:‡ôÏd`Ã ú1€“°º§PÂè‚Å5©*Ÿa„âÇâxÉ²û„—þ­MÓbe«úœ™‚¿Bê{½òyKúSÊZ?]š´€m8ËÛÝLk325Q4r§PH‚è¤i–¬iñ]:wÃï)‰H´ý|™ýu!Z¬%–üÓƒ:Äc·	h/º
}(ó2«ˆÈÒœ[»›zøê_Õïwþ–ZHK±”­¬}óf9}.¹B®—>ˆ,ÛçÝ	ìÌŸ}ÍBçë©W2?h	Åòá¹ó4ÿ0	(gyçšî¡A“MÍØ|½1IlN(°˜Bl'ó ðmmP.»¡ŽÃjŒåÖÊ¤õ”Ô@ï¥Í·ßÒË™²eôífŒ­|lGª0a—ã»râ~g5±D`4à;Q©^²²Òè ÑinæñÒï\zñZ¥€–À¸»Pä6S¨l«Ë\M”|d2ù|Rã;NË
hø”HñôVäãYŒÖÖTbÝT•z¶‡þÉ´-éÒˆ	Zž;Äš@ŒcIô%¸vä™iß°öñD4ÉŒNóSš8´iÕ+ÐYôãôrÐ•µþâ.­7!Õ¬Rë~¢¯~·ì™¿sêwh§ž›Æ`Ó°…$;¼5SåDév
WßnˆÙ/íZu;C:À…Qô¤lÆ¢XV‰Îq,¼ª¯’‘–=Ë~~’©°».pgUQùaÞÏÞ1Ä¹ÃX$†êù¡ÚØvšƒ¾ùâÿùç@øWr
A_³ôgÇu¸©-cå;¶Ke‘ƒþîK#I8DFˆÜg÷|ÂiYkšt]úšè:ùÖùŒ“8y.¸Tœš÷‚²¢šGª![ï2—•ªðt„ñ¥ø“d“±X‘VI-[_Ã5GPÏŒ‰IêÝî%‹îÜØÈAI7"z1ÿÖ=ÒC_Ó#3ðð„@8ìÓg°†þñú}»úý|ô’µ!¾T¾„ÂÞåEJy‚ò—‰kûû«è ƒtœœ8b«Oéêè“$Ð`ók±„ÒZé@¦tUX½M_í|—ßJþùKúCÔæóŒÕþ¸öÙ!\R:	[”y–÷ª“àÕ¼bYK¤v¼8ÓlõáPV#·éã«# ¥u(Ç†	ÀDè‚Û¤üÔ:K-ÂåT—¬³;j®jÎðklÁ!U€h1J˜¤¼ ômŒŽn'ÿÞ1íýIz¶t¶üÃœstŠGhåi›&è|ð”¨í5aqVƒM§ª–[<§&æ¡íPS­@=òÖ!å°(ÿ"AÞrÅ.ÿ*C:\v>ƒþîK#I8DFˆÜg÷|ÂiYkšt]úšè:ùÖùŒ“8y.¸Tœš÷‚‚³ï	…|wNEÕÂÑúLìJUoìvãT/H&7¨µd¥±Tû‚<öû4 wÌßÜþ9ð›ÂÍGS+à¸mcà×7<š³ÕÓ<$á£ûF›ÚQ˜æâ³ª5jýƒÓj1,áÌ!`Y÷±þ¨øâÉê£/Ã o…Ötj™ðØ•‰8Mui£*¾°íëYú%Š¥û<Iˆð!¿ý[éjÁZYô5¼“WÉrhbô­BóÃÍföãõ„–y*uÏÿlt•{é:«ô-Ë8ÐÍ_@â8|0«„h@¼Úlývj .ç‘„ái~äíY»™	Á±So1lOR¡[EºÄSÈ~RþÖ#?f4ö={PRWñÓ]‹´ŠÜfÝ-Kkâ¥A’±ØT¤„®Š‹U-À½5ÁTÔÒ‹.W(±œÎã¦v(NÜ—ÔäŒx'¢"5û¤]ýU°ð—C7¡X{G!‘v'tË4µÜaÒ Z¶ªuÂÃÏÈã—¶.c%0#¡¼ŽËDÐÀ.×Œ®06 ¼¨"%
&¨ ¸¿ýçl¼	ïßpQm³^ó{eéÒº±×{ âÈè'%ÜŽÎnö²	ºŸÂÇ†fØEÏJày’Ãn]ÙßjHN×	••‡*±„È¬~Nñ•çöÉÄ¢ðY˜¾Ž(  Y&"ÝöÿwŒ@À'Û+Všt4»åèõ2jà6 w©Ãl;4rIt<=}³GŠ]V×[|º:°.˜ÐPee˜ïUŸ;5‘³6‹¿l'S²
w@D„ø[pívpDu‹ø²Ú(7É2u"º@Ö 8ÁìY0–¸òw”ù  #ô¢N¡±N¿&µ¡…JÕ^ÐRæYwïXŽv6‹Fã7Ìu‘“<ùìfˆŠ¹çU0Í(›¢¶Æ¦~ï±¿â†>9œ7{o&Ô„ZŽidHÿæz&«ÿÆp=šÖÉQ§Ñ–&‚ì³±¹ôˆ6r¢lT‘¤=eòjvzª"WÛ]ªYwYšÝ.ÿzû.‰4=xq,[Æz¼Ö æ‚+†ïš3êàÃî*(Šë´¥š¯hbðüƒ½ÖRÙâ{=ªƒ­Òh^uB)þA^|¥Ø£ýÌôu€3¢1(Û kÐÿACÁkDH¦/L®ëÏHv&Šnc|BY\ZU‚Š¿¶Iœç¯Å;äë/¡­ëÑÆú&”a~;%§c²]/F2â±G]Ï…JPX'ŒQq_å÷ýšÓ
¨5¡Ç"©Æ£§aPUó;á»}8;Sˆ%€8Þ­)y]Ë4µÜaÒ Z¶ªuÂÃÏÈã"M-$~×;˜«2*éLMDã]>R9ßû·ˆù@$‘œy[ø‹E=ŸŒÒ”­]Gh–“Â6ùkgñ`b¤ ì)ô›Fÿè4ìJUoìvãT/H&7¨µdsâä×WÃ3¨t½«ùƒ\“B1=­¾Tª³œgSÑî5*ïË[ãG;'¸}°¶ïË×–J{ëö;Ú¼£¨&‚ì³±¹ôˆ6r¢lT‘w“hªôIÐ¾v>`»‰>2j#%±Iê%†Åz)è7(Ù…/ây+5ÍÄa_Ü¨¿ñ_È«Àå…:\5áZ‚ýsØ‚£ˆo†+þœ‰ÒQ€˜p¢ÿf•ªV-7s«@¦ÐÖTçÊ±¾¾á–´¹KMêe§ð²0HŠbE¿•ePKs3Ô¾‚Ó”®_‚ãn®*TÔQDvZË“†ou§ÖKºŒ]Ô.š¼©ç5oÛ)TIü±|ó—ñÈ it Ì#±:ûæèŽõér$ôÞH™·r_5©q‘Å€³§·™'Z¶w:Æ,?­Òž•Å`áê—³ÔŸRŽ'wžaR‘wÛsÃçœ„–O«PéIw/„ãÎ›ëýøûÎ¡1zýîˆB–~žÛE~3kOÐÄ~8R„£’YQs}$¬ÇÒÂ[/gä¶‘ŒÛõä,½hiZ7aUbù I†løz„õhs+!»ý½Õv’¹“¸˜Æ¼Ç@ä!šó‘ø¨7Ô¾ÙKŸåÍc7ØÅ++é¦Ã9_n¥QåxÝJ8L<êHÚ(I¢©5Á¸æm<a—ý¹¢Os= b½c¿£ßn„ê&b6)EcÁÜiPN Pà5w;+F5Ý›S01çÒd/(D’/yB]˜HOd‡ð–¥YÑwÙ@ŠLž£9•M³þ8Ôë¥Fô±pƒl¢ìP‡lÅW '‘`'Zµ„çUÑ¨‡Ll1PNnAË"s/YFç‡¯‚ð™ŸÝPS­@=òÖ!å°(ÿ"AÞrÅ.ÿ*C:\v>ƒþîK#I8DFˆÜg÷|ÂiYkšt]úšè:ùÖùŒ“8y.¸Tœš÷‚Þjw‚âpŒù™	±1eqº¯ˆþžŠ'¢þƒƒÆ4 Œ¸ˆÖ}ùˆ§çÛåì³‡ä«fDÇ˜¦ì¡yü®îŒÅeä Ò-	·\ÜRX%Ã}hM5m§ïE:\…&{ëùªD?è^
Hõï Îå?é=AØ¼‹qg§†fæ³û»¡Ý²ŽV°eÒY {}ÚƒÄäuÊŽ–E³ãáQk™âe)×ÖúÚÒÑö1ÈƒK&,ìJUoìvãT/H&7¨µd(µÁÙèm·i^BûfówjÍ ˜ê+¼äå„ûB|Ã\6öY^Ø ËK]žmÞRì'@wu\‰'›jŸ|#ðÅ`È°^Ó£¤f3^ý…JÙL[TAüøv4n™?HEP­ºÖ[g4×<™ÁðhP-YŸûrÃ«+æst)Fó¨CÆ#¹%c¾€D`—¡ñió
ª+ÜûïÂe<d[ ÓñËÑ]¨GâÐ™àÌ6²é'eU›VœøÛ²á
wKM¨î)Ô•æ8ËÆÜ#×1—*qÞý$Ðd9«ˆŸ|é$ÎV-|;U•ôØDGþžºI­¥+¸†©@³ÛLåÛ×³µXCÔ2Ï¯ï.J“L«•Ê&>a§"W¦±µ1cÛ¼ï‚=AØ¼‹qg§†fæ³û»¡Ý²ŽV°eÒY {}ÚƒÄäuÊŽ–E³ãáQk™âñ¶CøLLå@ÁIà.±Å]'·övùÛª6étž†vE~bw¶r†x_>r<ŸA2$húštßÞôO×­+BÄ³oÀþPŒdÌÀ¶øCgR}¡b^§ÖKºŒ]Ô.š¼©ç5o€dÝ}D¢ýDòY”4ˆŒqeÁK+µeÔBù@:³–3·<ï'àóºe×yÃ=Íb‡
ŒhàÂ²+Z!©ˆ `ÊìjÞÚAþ½h´Ç®ÄŠº™ðtz WwpËƒñ]<§Á91ýÂu§•¼¥DÌHL'ü6/T)+›®Du‹ø²Ú(7É2u"º@.•äÑBÑµZ™ƒ³…B->Ýj?®­n±ýzvuÿ•Á$I¶Â¶%w÷³ÄE[4p,cH-¡
å:.¾µçèk£Ã™‚µTçß6ô=–êÚsrB¡è|—.€ë
ç“}ybìAdŸÊD¾±ÀN{pß›ò2o0_™h”KäÞ¨|5 s}ûò¡â5‰ÝÆéD½‚¥8%ä					<div class='content'>
								<b></b>
								<p>Notice that for a phone number user can input a '+' sign, a dash '-' or a space ' '</p>
							</div>
						</div>
					</div>
					<div class="item">
						<label>
							<span>Drop down selection</span>
							<select class="required" name="dropdown">
								<option value="">-- none --</option>
								<option value="o1">Option 1</option>
								<option value="o2">Option 2</option>
								<option value="o3">Option 3</option>
							</select>
						</label>
						<div class='tooltip help'>
							<span>?</span>
							<div class='content'>
								<b></b>
								<p>Choose something or choose not. what shall it be?</p>
							</div>
						</div>
					</div>
					<div class="item">
						<label>
							<span>url</span>
							<input name="url" placeholder="http://www.website.com" required="required" type="url" />
						</label>
					</div>

					<div class="item">
						<label>
							<span>Checkboxes</span>
							<label><input required="required" type="checkbox" />I agree</label>
						</label>
					</div>

					<div class="item multi required">
						<label for='multi_first'>
							<span>Multifield</span>
						</label>
						<div class='input'>
							<input type="text" name="multi1" maxlength='4' id='multi_first'>
							<input type="text" name="multi2" maxlength='4'>
							<input type="text" name="multi3" maxlength='4'>
							<input type="text" name="multi4" maxlength='4'>
							<input type="text" name="multi5" maxlength='4'>
							<input type="text" name="multi6" maxlength='4'>
							<input data-validate-length-range="24" data-validate-pattern="alphanumeric" id="serial" name="serial" type="hidden" required='required' />
						</div>
						<div class='tooltip help'>
							<span>?</span>
							<div class='content'>
								<b></b>
								<p>This is a multifield, which let the user input a serial number or credit card number for example, and the trick is to validate the combined result, which is stored in a hidden field</p>
							</div>
						</div>
					</div>
					<div class="item">
						<label>
							<span>File upload</span>
							<input type='file' required>
						</label>
					</div>
					<div class="item">
						<label>
							<span>message</span>
							<textarea required="required" name='message'></textarea>
						</label>
					</div>
				</fieldset>
				<fieldset>
					<p>There is a hidden "Required" form field below, notice it will not be validated due to its lack of visibility. The reason for this is that sometimes there is a section in a form that is not visible until some action is taken, but you do not want to change all those fields' "required" attributes on-the-fly, so that is why.</p>
					<input name="somethingHidden" required="required" type="text" style='display:none' />
				</fieldset>
				<button id='send' type='submit'>Submit</button>
			</form>
		</section>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="multifield.js"></script>
    <script src="validator.js"></script>
	<script>
		// initialize the validator function
		validator.message['date'] = 'not a real date';

		// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
		$('form')
			.on('blur', 'input[required], input.optional, select.required', validator.checkField)
			.on('change', 'select.required', validator.checkField)
			.on('keypress', 'input[required][pattern]', validator.keypress);

		$('.multi.required')
			.on('keyup blur', 'input', function(){
				validator.checkField.apply( $(this).siblings().last()[0] );
			});

		// bind the validation to the form submit event
		//$('#send').click('submit');//.prop('disabled', true);

		$('form').submit(function(e){
			e.preventDefault();
			var submit = true;

			// Validate the form using generic validaing
			if( !validator.checkAll( $(this) ) ){
				submit = false;
			}

			if( submit )
				this.submit();

			return false;
		});

		/* FOR DEMO ONLY */
		$('#vfields').change(function(){
			$('form').toggleClass('mode2');
		}).prop('checked',false);

		$('#alerts').change(function(){
			validator.defaults.alerts = (this.checked) ? false : true;
			if( this.checked )
				$('form .alert').remove();
		}).prop('checked',false);
	</script>
</body>
</html>