<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.8.4" -->
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>

<channel>
	<title>http://blog.sLajax.com</title>
	<link>http://blog.slajax.com</link>
	<description>secure lightweight ajax solutions</description>
	<pubDate>Wed, 16 Dec 2009 07:39:40 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
			<item>
		<title>sLvalidate v.1</title>
		<link>http://blog.slajax.com/2007/03/20/sl-validate/</link>
        <customfield>validate.gif</customfield>
		<comments>http://blog.slajax.com/2007/03/20/sl-validate/#comments</comments>
		<pubDate>Tue, 20 Mar 2007 22:02:26 +0000</pubDate>
		<dc:creator>Kyle</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[source code]]></category>
		<category><![CDATA[validiation]]></category>

		<guid isPermaLink="false">http://slajax.com/blog/2007/03/20/sl-validate/</guid>
		<description><![CDATA[So I had to write a validation script for sLquantity [1]. The idea is simply that if any items 
//////////////////////////////////////////////////////////////////////////////////////////////////
/* sLvalidate - v1.0 - 5:16 PM 20/03/2007
	@author: kc@slajax.com
	@validates entries for sLquantity before posting to update cookie
			var sLvalidateOpts = { 
					items:'select', // boxes to gather
					submitBtn: 'button', // id of submit button
					valid: true // this must be set to true for validation to occur
					};	
*/
//////////////////////////////////////////////////////////////////////////////////////////////////

var sLvalidate = new Class({
		initialize:function(options){
			this.setOptions(options);
			this.href(options);
		},
		setOptions:function(options){
			this.options = Object.extend( { }, options &#124;&#124; { } );
		},
		gather:function(options){
			this.resetErrors(options);
			this.itemArr = [];
			this.itemObj = {};
			
		$$(options.items).each(function(el,i){
					this.itemArr[i] = $(el).options[$(el).selectedIndex].value;
					this.itemObj[i] = $(el);
				}.bind(this) );
				
			this.validate(options);
		},
		validate:function(options){				
			this.itemArr.each(function(el,i){ 				
				if ( this.itemArr[i] == 0 )
							this.throwError(options, i);							
				}.bind(this) );

		 if( options.valid ) document.forms[0].submit()
		},
		throwError:function(options, i){
			options.valid = false;
				this.itemObj[i].getParent().getParent().setStyle('background-color','#FF0000');
				this.itemObj[i].getParent().getParent().setStyle('padding','2px 0px 2px 2px');
				
		},
		resetErrors:function(options){
			options.valid = true;
			$$(options.items).each(function(el,i){
					$(el).getParent().getParent().setStyle('background-color','#FFFFFF');		
					$(el).getParent().getParent().setStyle('padding','0');
			}.bind(this) );
		},
		href:function(options){
					$(options.submitBtn).addEvent('click', function(){
								this.gather(options);	
						}.bind(this) );		
		}
});

var sLvalidateOpts = { 
			items:'select', // boxes to gather
			submitBtn: 'button', // id of submit button
			valid: true // this must be set to true for validation to occur
			};	

		var validate = new sLvalidate(sLvalidateOpts);


At some point I'll extend this to cover all form validation needs.

[1] http://slajax.com/blog/2007/03/16/sl-quantity/]]></description>
			<content:encoded><![CDATA[So I had to write a validation script for <a href="http://slajax.com/blog/2007/03/16/sl-quantity/">sLquantity</a>. The idea is simply that if any items <div class='codeWrapper'><div class='codeTitle'>javascript<span class='codeInstruct'>hover edges to scroll</span></div><code><pre>&nbsp;
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
<span style="color: #009900; font-style: italic;">/* sLvalidate - v1.0 - 5:16 PM 20/03/2007
	@author: kc@slajax.com
	@validates entries for sLquantity before posting to update cookie
			var sLvalidateOpts = { 
					items:'select', // boxes to gather
					submitBtn: 'button', // id of submit button
					valid: true // this must be set to true for validation to occur
					};	
*/</span>
<span style="color: #009900; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////////////////////</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> sLvalidate = <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>
		initialize:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">setOptions</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">href</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		setOptions:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">options</span> = Object.<span style="color: #006600;">extend</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #66cc66;">&#125;</span>, options || <span style="color: #66cc66;">&#123;</span> <span style="color: #66cc66;">&#125;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		gather:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">resetErrors</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>;
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span> = <span style="color: #66cc66;">&#123;</span><span style="color: #66cc66;">&#125;</span>;
			
		$$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">items</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el,i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> = $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">options</span><span style="color: #66cc66;">&#91;</span>$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">selectedIndex</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">value</span>;
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> = $<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>;
				<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
				
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">validate</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		validate:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>				
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el,i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span> 				
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemArr</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> == <span style="color: #CC0000;">0</span> <span style="color: #66cc66;">&#41;</span>
							<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">throwError</span><span style="color: #66cc66;">&#40;</span>options, i<span style="color: #66cc66;">&#41;</span>;							
				<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
		 <span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> options.<span style="color: #006600;">valid</span> <span style="color: #66cc66;">&#41;</span> document.<span style="color: #006600;">forms</span><span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">submit</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#125;</span>,
		throwError:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options, i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			options.<span style="color: #006600;">valid</span> = <span style="color: #003366; font-weight: bold;">false</span>;
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'background-color'</span>,<span style="color: #3366CC;">'#FF0000'</span><span style="color: #66cc66;">&#41;</span>;
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">itemObj</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'padding'</span>,<span style="color: #3366CC;">'2px 0px 2px 2px'</span><span style="color: #66cc66;">&#41;</span>;
				
		<span style="color: #66cc66;">&#125;</span>,
		resetErrors:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			options.<span style="color: #006600;">valid</span> = <span style="color: #003366; font-weight: bold;">true</span>;
			$$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">items</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>el,i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'background-color'</span>,<span style="color: #3366CC;">'#FFFFFF'</span><span style="color: #66cc66;">&#41;</span>;		
					$<span style="color: #66cc66;">&#40;</span>el<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getParent</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'padding'</span>,<span style="color: #3366CC;">'0'</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>,
		href:<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
					$<span style="color: #66cc66;">&#40;</span>options.<span style="color: #006600;">submitBtn</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">addEvent</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'click'</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
								<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">gather</span><span style="color: #66cc66;">&#40;</span>options<span style="color: #66cc66;">&#41;</span>;	
						<span style="color: #66cc66;">&#125;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;		
		<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> sLvalidateOpts = <span style="color: #66cc66;">&#123;</span> 
			items:<span style="color: #3366CC;">'select'</span>, <span style="color: #009900; font-style: italic;">// boxes to gather</span>
			submitBtn: <span style="color: #3366CC;">'button'</span>, <span style="color: #009900; font-style: italic;">// id of submit button</span>
			valid: <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #009900; font-style: italic;">// this must be set to true for validation to occur</span>
			<span style="color: #66cc66;">&#125;</span>;	
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> validate = <span style="color: #003366; font-weight: bold;">new</span> sLvalidate<span style="color: #66cc66;">&#40;</span>sLvalidateOpts<span style="color: #66cc66;">&#41;</span>;</pre></code></div>

At some point I&#8217;ll extend this to cover all form validation needs.]]></content:encoded>
			<wfw:commentRss>http://blog.slajax.com/2007/03/20/sl-validate/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
