app:validation
| Widget Name | appcelerator validation |
| Element | <app:validation> |
| Author | Jeff Haynie |
| Homepage | http://www.appcelerator.org |
| Description | validation widget |
- Required Attributes (0)
- Optional Attributes (0)
- Examples (1)
- Source code
| Name | Type | Description | Default value |
|---|---|---|---|
| There are no required attributes | |||
| Name | Type | Description | Default value |
|---|---|---|---|
| There are no optional 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
Chapters
- Web Expressions (Interaction)
- Web Expressions (Visual)
- Web Expression Macros
-
Widget Reference
- app:as_flexflow
- app:box
- app:button
- app:calendar
- app:chart
- app:content
- app:datacache
- app:datatable
- app:download
- app:editinplace
- app:ext_grid
- app:ext_paging_grid
- app:ext_tree
- app:field
- app:folder
- app:graphical_music_player
- app:http
- app:if
- app:imagetransition
- app:iterator
- app:message
- app:modalbox
- app:modaldialog
- app:mp3player
- app:music_player
- app:pagination
- app:panel
- app:progressbar
- app:script
- app:search
- app:security
- app:shadowbox
- app:simple_panel
- app:statemachine
- app:stopwatch
- app:tabpanel
- app:template
- app:tooltip
- app:upload
- » app:validation
- app:widget
- app:yui_map
- CSS Helper Classes
- Advanced Configuration
- Debugging
- Forms
- Localization
- Interpolation
- Javascript Variables
- Javascript Functions
- Service Broker