app:validation
  • Required Attributes (0)
  • Optional Attributes (0)
  • Examples (1)
  • Source code
Name Type Description Default value
There are no required attributes
Back to menuExample: Simple Example

This is a simple example that uses the <app:validation>.

Required Date:

<input type="text" validator="date" decorator="date" id="date"/>

Optional Email:

<input type="text" validator="email_optional" decorator="email" id="email"/>

Required (at least 1 character):

<input type="text" validator="required" decorator="required" id="required_field"/>

Optional Number (decimal > 0):

<input type="text" validator="number_optional" decorator="number" id="number"/>

Custom Decorator:

wrong answer, pal... All Fields Valid 1 or more Fields Invalid date email required_field number custom
<input type="text" validator="required" decorator="custom" decoratorId="my_custom_decorator" id="custom"/>
<span id="my_custom_decorator" style="color:green;font-size:16px">wrong answer, pal...</span>
<span on="l:validation.test[valid=true] then show else hide" style="color:green;display:none">
	All Fields Valid
</span>
<span on="l:validation.test[valid=false] then show else hide" style="color:red;display:none">
	1 or more Fields Invalid
</span>
<app:validation on="valid then l:validation.test[valid=true] else l:validation.test[valid=false]">
	<members>
		 date email required_field number custom
	</members>
</app:validation>
  1 /*
  2  * This file is part of Appcelerator.
  3  *
  4  * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved.
  5  * For more information, please visit http://www.appcelerator.org
  6  *
  7  * Appcelerator is free software: you can redistribute it and/or modify
  8  * it under the terms of the GNU General Public License as published by
  9  * the Free Software Foundation, either version 3 of the License, or
 10  * (at your option) any later version.
 11  *
 12  * This program is distributed in the hope that it will be useful,
 13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU General Public License for more details.
 16  * 
 17  * You should have received a copy of the GNU General Public License
 18  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 19  *
 20  */
 21 
 22 
 23 Appcelerator.Compiler.registerCustomCondition(
 24 {
 25     conditionNames: ['valid', 'invalid']
 26 },
 27 function (element,condition,action,elseAction,delay,ifCond)
 28 {
 29 	switch (condition)
 30 	{
 31 		case 'valid':
 32 		case 'invalid':
 33 		{
 34 			if (Appcelerator.Compiler.getTagname(element,true)!='app:validation')
 35 			{
 36 				throw condition+' condition can only be used on app:validation widget, found on: '+element.nodeName;
 37 			}
 38 			Appcelerator.Widget.Validation.create(element,condition,action,elseAction,delay,ifCond);
 39 			return true;
 40 		}
 41 		default:
 42 		{
 43 			return false;
 44 		}
 45 	}
 46 });
 47 
 48 Appcelerator.Widget.Validation =
 49 {
 50 	getName: function()
 51 	{
 52 		return 'appcelerator validation';
 53 	},
 54 	getDescription: function()
 55 	{
 56 		return 'validation widget';
 57 	},
 58 	getVersion: function()
 59 	{
 60 		return 1.0;
 61 	},
 62 	getSpecVersion: function()
 63 	{
 64 		return 1.0;
 65 	},
 66 	getAuthor: function()
 67 	{
 68 		return 'Jeff Haynie';
 69 	},
 70 	getModuleURL: function ()
 71 	{
 72 		return 'http://www.appcelerator.org';
 73 	},
 74 	isWidget: function ()
 75 	{
 76 		return true;
 77 	},
 78 	getWidgetName: function()
 79 	{
 80 		return 'app:validation';
 81 	},
 82 	getAttributes: function()
 83 	{
 84 		return [];
 85 	},	
 86 	buildWidget: function(element,parameters,state)
 87 	{
 88 		return {
 89 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
 90 			'presentation':''
 91 		};
 92 	},
 93 	create: function (element,condition,action,elseAction,delay,ifCond)
 94 	{
 95 		Element.cleanWhitespace(element);
 96 		var newhtml = element.innerHTML;
 97 		newhtml = newhtml.replace(/<MEMBERS/g,'<APP:MEMBERS').replace(/\/MEMBERS>/g,'/APP:MEMBERS>');
 98 		element.innerHTML = newhtml;
 99 		
100 		var me = element.firstChild;
101 		if (!me || me.length <= 0)
102 		{
103 			throw "required 'members' element not found for "+element.nodeName;
104 		}
105 		
106 		var value = Appcelerator.Compiler.getHtml(me,false);
107 		var tokens = value.split(/[ ,]/);
108 		var id = element.id;
109 
110 		var validAction;
111 		var invalidAction;
112 		if (condition=='valid')
113 		{
114 			validAction = Appcelerator.Compiler.makeConditionalAction(id,action,ifCond);
115 		}
116 		else if (elseAction)
117 		{
118 			validAction = Appcelerator.Compiler.makeConditionalAction(id,elseAction,ifCond);
119 		}
120 		if (condition=='invalid')
121 		{
122 			invalidAction = Appcelerator.Compiler.makeConditionalAction(id,action,ifCond);
123 		}
124 		else if (elseAction)
125 		{
126 			invalidAction = Appcelerator.Compiler.makeConditionalAction(id,elseAction,ifCond);
127 		}
128 		
129 		var obj = 
130 		{
131 			members:[],
132 			invalid: null,
133 
134 			listener: function (elem,valid)
135 			{
136 				if (this.invalid!=null && (valid && !this.invalid))
137 				{
138 					// no change
139 					return;
140 				}
141 				var invalid = true;
142 				if (valid)
143 				{
144 					invalid = false;
145 					for (var c=0,len=this.members.length;c<len;c++)
146 					{
147 						if (!this.members[c].validatorValid)
148 						{
149 							invalid = true;
150 							break;
151 						}
152 					}
153 				}
154 				if (this.invalid!=null && (this.invalid == invalid))
155 				{
156 					// no change
157 					return;
158 				}
159 				this.invalid = invalid;
160 				if (invalid && invalidAction)
161 				{
162 					Appcelerator.Compiler.executeAfter(invalidAction,delay);
163 				}
164 				else if (!invalid)
165 				{
166 					Appcelerator.Compiler.executeAfter(validAction,delay);
167 				}
168 			}
169 		};
170 		obj.listenerFunc = obj.listener.bind(obj);
171 		var valid = true;
172 		for (var c=0,len=tokens.length;c<len;c++)
173 		{
174 			var token = tokens[c].trim();
175 			if (token.length > 0)
176 			{
177 				var elem = $(token);
178 				if (!elem)
179 				{
180 					throw "couldn't find validation member with ID: "+token;
181 				}
182 				if (!Appcelerator.Compiler.getFunction(elem,'addValidationListener'))
183 				{
184 					if (elem.field)
185 					{
186 						elem = elem.field;
187 					}
188 					else
189 					{
190 						throw "element with ID: "+token+" doesn't have a validator";
191 					}
192 				}
193 				obj.members.push(elem);
194 				Appcelerator.Compiler.executeFunction(elem,'addValidationListener',[obj.listenerFunc]);
195 				valid = valid && elem.validatorValid;
196 			}
197 		}
198 		// make the initial call
199 		obj.listenerFunc(obj.members[0],valid);
200 		return obj;
201 	}
202 };
203 
204 Appcelerator.Widget.register('app:validation',Appcelerator.Widget.Validation);
205