Changeset 7283
- Timestamp:
- 02/11/07 18:55:49 (22 months ago)
- Location:
- dijit/trunk
- Files:
-
- 8 modified
-
base/FormElement.js (modified) (2 diffs)
-
form/templates/Textbox.html (modified) (1 diff)
-
form/templates/ValidationTextbox.html (modified) (1 diff)
-
form/Textbox.js (modified) (2 diffs)
-
form/ValidationTextbox.js (modified) (12 diffs)
-
tests/form/test_validate.html (modified) (6 diffs)
-
themes/tundra/tundra.css (modified) (4 diffs)
-
util/parser.js (modified) (4 diffs)
Legend:
- Unmodified
- Added
- Removed
-
dijit/trunk/base/FormElement.js
r7215 r7283 78 78 dojo.html.prependClass(this.domNode, this["class"]+"Disabled"); 79 79 } 80 // TODO: if the widget is disabled do we need to do this? 81 this.containerNode.removeAttribute("tabIndex"); 80 // needed for FF when a tabIndex=0 div is inside a Button that is disabled 81 if (this.containerNode){ 82 this.containerNode.removeAttribute("tabIndex"); 83 } 82 84 }else{ 83 85 dojo.html.removeClass(this.domNode, this["class"]+"Disabled"); 84 this.containerNode.setAttribute("tabIndex", this.tabIndex); 86 if (this.containerNode){ 87 this.containerNode.setAttribute("tabIndex", this.tabIndex); 88 } 85 89 } 86 90 this.domNode.disabled = this.disabled = disabled; 87 d ojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", disabled);91 dijit.util.wai.setAttr(this.domNode, "waiState", "disabled", disabled); 88 92 }, 89 93 … … 92 96 }, 93 97 98 postCreate: function(){ 99 this._setDisabled(this.disabled == true); 100 }, 101 94 102 setValue: function(newValue){ 95 103 // summary: set the value of the widget. -
dijit/trunk/form/templates/Textbox.html
r7259 r7283 1 1 <input dojoAttachPoint='textbox' dojoAttachEvent='onblur;onfocus' 2 id='${this.id}' name='${this.name}' class="dojoInputField" type='${this.type}' >2 id='${this.id}' name='${this.name}' class="dojoInputField" type='${this.type}' size='${this.size}' maxlength='${this.maxlength}'> -
dijit/trunk/form/templates/ValidationTextbox.html
r7276 r7283 1 1 <span> 2 2 <input dojoAttachPoint='textbox' type='${this.type}' dojoAttachEvent='onblur;onfocus;onkeyup' 3 id='${this.widgetId}' name='${this.name}' size='${this.size}' maxlength='${this.maxlength}' 4 class='${this.className}'> 5 <span dojoAttachPoint='invalidSpan' class='${this.invalidClass}'>${this.messages.invalidMessage}</span> 6 <span dojoAttachPoint='missingSpan' class='${this.missingClass}'>${this.messages.missingMessage}</span> 7 <span dojoAttachPoint='rangeSpan' class='${this.rangeClass}'>${this.messages.rangeMessage}</span> 3 id='${this.id}' name='${this.name}' size='${this.size}' maxlength='${this.maxlength}' 4 class='dojoInputField'> 5 <span dojoAttachPoint='messageSpan' class='dojoValidationTextboxMessage'></span> 8 6 </span> -
dijit/trunk/form/Textbox.js
r7258 r7283 32 32 ucFirst: false, 33 33 34 // size: String 35 // Basic input tag size declaration. 36 size: "", 37 38 // maxlength: String 39 // Basic input tag maxlength declaration. 40 maxlength: "", 41 34 42 // digit: Boolean 35 43 // Removes all characters that are not digits if true. Default is false. … … 39 47 40 48 postCreate: function() { 49 dijit.form.Textbox.superclass.postCreate.apply(this); 41 50 // assign value programatically in case it has a quote in it 42 51 this.textbox.value = this.value; -
dijit/trunk/form/ValidationTextbox.js
r7276 r7283 3 3 dojo.require("dijit.form.Textbox"); 4 4 dojo.require("dojo.i18n.common"); 5 dojo.require("dojo.validate.common"); 5 6 6 7 dojo.requireLocalization("dijit.form", "validate"); … … 9 10 "dijit.form.ValidationTextbox", 10 11 dijit.form.Textbox, 11 function(){12 { 12 13 // summary: 13 14 // A subclass of Textbox. 14 15 // Over-ride isValid in subclasses to perform specific kinds of validation. 15 16 // this property isn't a primitive and needs to be created on a per-item basis. 17 this.flags = {}; 18 }, 19 { 16 20 17 // default values for new subclass properties 21 18 // required: Boolean 22 19 // Can be true or false, default is false. 23 20 required: false, 24 // rangeClass: String25 // Override default class used for out-of-range input data26 rangeClass: "range",27 // invalidClass: String28 // Class used to format displayed text in page if necessary to override default class29 invalidClass: "invalid",30 // missingClass: String31 // Override default class used for missing input data32 missingClass: "missing",33 classPrefix: "dojoValidate",34 // size: String35 // Basic input tag size declaration.36 size: "",37 // maxlength: String38 // Basic input tag maxlength declaration.39 maxlength: "",40 21 // promptMessage: String 41 22 // Will not issue invalid message if field is populated with default user-prompt text … … 45 26 invalidMessage: "", 46 27 // missingMessage: String 47 // The message to display if value is missing .28 // The message to display if value is missing or missing. 48 29 missingMessage: "", 30 // rangeMessage: String 31 // The message to display if value is out-of-range 49 32 rangeMessage: "", 50 33 // listenOnKeyPress: Boolean 51 34 // Updates messages on each key press. Default is true. 52 35 listenOnKeyPress: true, 36 // flags: Object 37 // user-defined object needed to pass parameters to the validator functions 38 flags: (function(){return {};})(), 39 // regExp: String 40 // regular expression string used to validate the input 41 // Do not specify both regExp and regExpGen 42 regExp: ".*", 43 // regExpGen: Function 44 // user replaceable function used to generate regExp when dependent on flags 45 // Do not specify both regExp and regExpGen 46 regExpGen: function(flags){ return this.regExp; }, 53 47 lastCheckedValue: null, 54 48 55 49 templatePath: dojo.uri.moduleUri("dijit.form", "templates/ValidationTextbox.html"), 56 50 57 // new DOM nodes58 invalidSpan: null,59 missingSpan: null,60 rangeSpan: null,61 62 51 getValue: function() { 63 52 return this.textbox.value; … … 69 58 }, 70 59 60 validator: function(value,flags){ 61 // summary: user replaceable function used to validate the text input against the regular expression. 62 return (new RegExp("^(" + this.regExpGen(flags) + ")$")).test(value); 63 }, 64 71 65 isValid: function() { 72 66 // summary: Need to over-ride with your own validation code in subclasses 73 return t rue;67 return this.validator(this.textbox.value, this.flags); 74 68 }, 75 69 70 rangeCheck: function(value,flags){ 71 // summary: user replaceable function used to validate the range of the numeric input value 72 if ((typeof flags.min == "number") || (typeof flags.min == "number")){ 73 return dojo.validate.isInRange(value, flags); 74 }else{ return true; } 75 }, 76 76 77 isInRange: function() { 77 78 // summary: Need to over-ride with your own validation code in subclasses 78 return t rue;79 return this.rangeCheck(this.textbox.value, this.flags); 79 80 }, 80 81 … … 95 96 // Show missing or invalid messages if appropriate, and highlight textbox field. 96 97 this.lastCheckedValue = this.textbox.value; 97 this.missingSpan.style.display = "none";98 this.invalidSpan.style.display = "none";99 this.rangeSpan.style.display = "none";100 98 101 99 var empty = this.isEmpty(); … … 108 106 // Display at most one error message 109 107 if(missing){ 110 this.m issingSpan.style.display = "";108 this.messageSpan.innerHTML = this.missingMessage; 111 109 }else if( !empty && !valid ){ 112 this. invalidSpan.style.display = "";110 this.messageSpan.innerHTML = this.invalidMessage; 113 111 }else if( !empty && !this.isInRange() ){ 114 this.rangeSpan.style.display = ""; 112 this.messageSpan.innerHTML = this.rangeMessage; 113 }else{ 114 this.messageSpan.innerHTML = ""; 115 115 } 116 116 117 this.highlight(); 117 118 }, … … 119 120 updateClass: function(className){ 120 121 // summary: used to ensure that only 1 validation class is set at a time 121 var pre = this.classPrefix; 122 dojo.html.removeClass(this.textbox,pre+"Empty"); 123 dojo.html.removeClass(this.textbox,pre+"Valid"); 124 dojo.html.removeClass(this.textbox,pre+"Invalid"); 125 dojo.html.addClass(this.textbox,pre+className); 122 dojo.html.removeClass(this.textbox,"dojoInputFieldValidationWarning"); 123 dojo.html.removeClass(this.textbox,"dojoInputFieldValidationError"); 124 dojo.html.addClass(this.textbox,className); 126 125 }, 127 126 … … 131 130 // highlight textbox background 132 131 if (this.isEmpty()) { 133 this.updateClass(" Empty");132 this.updateClass("dojoInputFieldValidationError"); 134 133 }else if (this.isValid() && this.isInRange() ){ 135 this.updateClass(" Valid");134 this.updateClass("dojoInputField"); 136 135 }else if(this.textbox.value != this.promptMessage){ 137 this.updateClass(" Invalid");136 this.updateClass("dojoInputFieldValidationError"); 138 137 }else{ 139 this.updateClass(" Empty");138 this.updateClass("dojoInputFieldValidationWarning"); 140 139 } 141 140 }, … … 143 142 onfocus: function(evt) { 144 143 if ( !this.listenOnKeyPress) { 145 this.updateClass(" Empty");144 this.updateClass("dojoInputFieldValidationWarning"); 146 145 } 147 146 }, … … 157 156 this.update(); 158 157 }else if (this.textbox.value != this.lastCheckedValue){ 159 this.updateClass(" Empty");158 this.updateClass("dojoInputFieldValidationWarning"); 160 159 } 161 160 }, … … 165 164 this.messages = dojo.i18n.getLocalization("dijit.form", "validate", this.lang); 166 165 dojo.lang.forEach(["invalidMessage", "missingMessage", "rangeMessage"], function(prop) { 167 if( this[prop]){ this.messages[prop] = this[prop]; }166 if(!this[prop]){ this[prop] = this.messages[prop]; } 168 167 }, this); 168 var p = this.regExpGen(this.flags); 169 this.regExp = p; 169 170 }, 170 171 … … 179 180 this.textbox.isInRange = function() { this.isInRange.call(this); }; 180 181 this.update(); 181 182 // apply any filters to initial value183 this.filter();184 182 } 185 183 } -
dijit/trunk/tests/form/test_validate.html
r7276 r7283 53 53 } 54 54 55 span.invalid, span.missing{55 .dojoValidationTextboxMessage { 56 56 display: inline; 57 57 margin-left: 1em; … … 63 63 } 64 64 65 .errorMessage {66 font-weight:bold;67 font-family:Arial, Verdana, sans-serif;68 color:#ff0000;69 font-size:0.9em;70 }71 .warningMessage {72 font-weight:bold;73 font-family:Arial, Verdana, sans-serif;74 color:#ff9900;75 font-size:0.9em;76 }77 65 .noticeMessage { 78 66 font-weight: normal; … … 81 69 font-size:0.9em; 82 70 } 83 .myValidateColorValid {84 background-color: #FF0000;85 }86 .myValidateColorInvalid {87 background-color: #00FF00;88 }89 .myValidateColorEmpty {90 background-color: #0000FF;91 }92 71 </style> 93 72 </head> … … 121 100 <div class="formQuestion"> 122 101 <span class="emphasise">Age: </span> 123 <span class="noticeMessage"> Textbox class, Attributes: {trim: true, digit: true, class: 'small'}, all but digits extracted. 102 <span class="noticeMessage"> Textbox class, Attributes: {trim: true, digit: true, class: 'small'}, all but digits extracted.</span> 124 103 </div> 125 104 <div class="formAnswer"> … … 143 122 </div> 144 123 145 <!--146 TODO: uncomment when other validation widgets have been ported over.147 124 <div class="formQuestion"> 148 125 <span class="emphasise">Elevation: </span> 149 126 <span class="noticeMessage">IntegerTextbox class, 150 Attributes: {trim: true, required: true, signed: true classPrefix: "myValidateColor"}, Enter feet above sea level with a sign. (note: these colors are drastically different due to demonstrating the effects of classPrefix.)</span>127 Attributes: {trim: true, required: true, signed: true }, Enter feet above sea level with a sign.</span> 151 128 </div> 152 129 <div class="formAnswer"> 153 130 <input type="text" name="elevation" class="medium" value="300" 154 dojoType="dijit.form.IntegerTextbox" 131 dojoType="dijit.form.ValidationTextbox" 132 regExpGen="dojo.regexp.integer" 133 flags="{signed:true}" 155 134 trim="true" 156 classPrefix="myValidateColor" 157 required="true" 158 signed="true" 135 required="true" 159 136 invalidMessage="Invalid elevation. Be sure to use a plus or minus sign." /> 160 137 </div> … … 177 154 trim: "true", 178 155 required: "true", 179 signed: "false",180 separator: ",",156 regExpGen: dojo.regexp.integer, 157 flags: {signed:false, separator: ","}, 181 158 invalidMessage: "Invalid population. Be sure to use commas." 182 159 }; 183 160 var refNode = document.getElementById("attach-here"); 184 161 185 var w = new dijit.form. IntegerTextbox(name,props, refNode);162 var w = new dijit.form.ValidationTextbox(props, refNode); 186 163 }); 187 164 </script> 165 <!-- 166 TODO: uncomment when other validation widgets have been ported over. 188 167 189 168 <div class="formQuestion"> -
dijit/trunk/themes/tundra/tundra.css
r7276 r7283 45 45 46 46 /* Default Disabled Styles*/ 47 .dojoButton[disabled], 48 .dojoInputField[disabled], 47 49 .dojoButtonDisabled, 48 50 .dojoInputFieldDisabled { … … 53 55 } 54 56 55 .dojoButtonDisabled:hover, 56 .dojoInputFieldDisabled:hover { 57 color:#787878; 58 59 } 60 57 .dojoButton[disabled]:active, 58 .dojoInputField[disabled]:active, 61 59 .dojoButtonDisabled:active, 62 60 .dojoInputFieldDisabled:active { … … 73 71 } 74 72 75 .dojoInputFieldDisabled:hover { 76 border-color:#e0e0e0; 73 .dojoInputFieldValidationWarning, 74 .dojoInputFieldValidationWarning:hover, 75 .dojoInputFieldValidationWarning:focus { 76 /* TBD */ 77 background-color:cyan; 77 78 } 78 79 … … 90 91 background-image: url(check.gif); 91 92 } 92 93 .dojoValidateEmpty{94 background-color: #00FFFF;95 }96 .dojoValidateValid{97 background-color: #cfc;98 }99 .dojoValidateInvalid{100 background-color: #fcc;101 }102 .dojoValidateRange{103 background-color: #ccf;104 } -
dijit/trunk/util/parser.js
r7229 r7283 30 30 switch(type){ 31 31 case "string": 32 default:33 32 return value; 34 33 case "number": … … 38 37 case "function": 39 38 if(value.search(/[^\w\.]+/i) == -1){ 40 return dojo. evalObjPath(value, false);39 return dojo.getObject(value, false); 41 40 }else{ 42 41 try{ … … 51 50 case "uri": 52 51 return dojo.uri.dojoUri(value); 52 default: 53 try { eval("var tmp = "+value); return tmp; } 54 catch(e) { return value; } 53 55 } 54 56 }; … … 103 105 for(var attrName in clsInfo.params){ 104 106 var attrValue = node.getAttribute(attrName); 105 if(attrValue ){107 if(attrValue != null){ 106 108 var attrType = clsInfo.params[attrName]; 107 109 params[attrName] = str2obj(attrValue, attrType);
