- Author:
- David Nickerson <nickerso@users.sourceforge.net>
- Date:
- 2009-07-16 02:00:03+12:00
- Desc:
- the starting point for the HH tutorial example
- Permanent Source URI:
- https://models.fieldml.org/workspace/a1/rawfile/f6a8f90307388eb4b040ee3566b84d88b59247f7/dojo-presentation/js/dojo/dijit/form/ValidationTextBox.js
dojo.provide("dijit.form.ValidationTextBox");
dojo.require("dojo.i18n");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Tooltip");
dojo.requireLocalization("dijit.form", "validate");
/*=====
dijit.form.ValidationTextBox.__Constraints = function(){
// locale: String
// locale used for validation, picks up value from this widget's lang attribute
// _flags_: anything
// various flags passed to regExpGen function
this.locale = "";
this._flags_ = "";
}
=====*/
dojo.declare(
"dijit.form.ValidationTextBox",
dijit.form.TextBox,
{
// summary:
// A TextBox subclass with the ability to validate content of various types and provide user feedback.
templatePath: dojo.moduleUrl("dijit.form", "templates/ValidationTextBox.html"),
baseClass: "dijitTextBox",
// default values for new subclass properties
// required: Boolean
// Can be true or false, default is false.
required: false,
// promptMessage: String
// Hint string
promptMessage: "",
// invalidMessage: String
// The message to display if value is invalid.
invalidMessage: "$_unset_$", // read from the message file if not overridden
// constraints: dijit.form.ValidationTextBox.__Constraints
// user-defined object needed to pass parameters to the validator functions
constraints: {},
// regExp: String
// regular expression string used to validate the input
// Do not specify both regExp and regExpGen
regExp: ".*",
// regExpGen: Function
// user replaceable function used to generate regExp when dependent on constraints
// Do not specify both regExp and regExpGen
regExpGen: function(/*dijit.form.ValidationTextBox.__Constraints*/constraints){ return this.regExp; },
// state: String
// Shows current state (ie, validation result) of input (Normal, Warning, or Error)
state: "",
// tooltipPosition: String[]
// See description of dijit.Tooltip.defaultPosition for details on this parameter.
tooltipPosition: [],
setValue: function(){
this.inherited(arguments);
this.validate(this._focused);
},
validator: function(/*anything*/value, /*dijit.form.ValidationTextBox.__Constraints*/constraints){
// summary: user replaceable function used to validate the text input against the regular expression.
return (new RegExp("^(?:" + this.regExpGen(constraints) + ")"+(this.required?"":"?")+"$")).test(value) &&
(!this.required || !this._isEmpty(value)) &&
(this._isEmpty(value) || this.parse(value, constraints) !== undefined); // Boolean
},
_isValidSubset: function(){
// summary:
// Returns true if the value is either already valid or could be made valid by appending characters.
return this.textbox.value.search(this._partialre) == 0;
},
isValid: function(/*Boolean*/ isFocused){
// summary: Need to over-ride with your own validation code in subclasses
return this.validator(this.textbox.value, this.constraints);
},
_isEmpty: function(value){
// summary: Checks for whitespace
return /^\s*$/.test(value); // Boolean
},
getErrorMessage: function(/*Boolean*/ isFocused){
// summary: return an error message to show if appropriate
return this.invalidMessage; // String
},
getPromptMessage: function(/*Boolean*/ isFocused){
// summary: return a hint to show if appropriate
return this.promptMessage; // String
},
_maskValidSubsetError: true,
validate: function(/*Boolean*/ isFocused){
// summary:
// Called by oninit, onblur, and onkeypress.
// description:
// Show missing or invalid messages if appropriate, and highlight textbox field.
var message = "";
var isValid = this.disabled || this.isValid(isFocused);
if(isValid){ this._maskValidSubsetError = true; }
var isValidSubset = !isValid && isFocused && this._isValidSubset();
var isEmpty = this._isEmpty(this.textbox.value);
this.state = (isValid || (!this._hasBeenBlurred && isEmpty) || isValidSubset) ? "" : "Error";
if(this.state == "Error"){ this._maskValidSubsetError = false; }
this._setStateClass();
dijit.setWaiState(this.focusNode, "invalid", isValid ? "false" : "true");
if(isFocused){
if(isEmpty){
message = this.getPromptMessage(true);
}
if(!message && (this.state == "Error" || (isValidSubset && !this._maskValidSubsetError))){
message = this.getErrorMessage(true);
}
}
this.displayMessage(message);
return isValid;
},
// currently displayed message
_message: "",
displayMessage: function(/*String*/ message){
// summary:
// User overridable method to display validation errors/hints.
// By default uses a tooltip.
if(this._message == message){ return; }
this._message = message;
dijit.hideTooltip(this.domNode);
if(message){
dijit.showTooltip(message, this.domNode, this.tooltipPosition);
}
},
_refreshState: function(){
this.validate(this._focused);
},
_update: function(/*Event*/e){
this._refreshState();
this._onMouse(e); // update CSS classes
},
//////////// INITIALIZATION METHODS ///////////////////////////////////////
constructor: function(){
this.constraints = {};
},
postMixInProperties: function(){
this.inherited(arguments);
this.constraints.locale = this.lang;
this.messages = dojo.i18n.getLocalization("dijit.form", "validate", this.lang);
if(this.invalidMessage == "$_unset_$"){ this.invalidMessage = this.messages.invalidMessage; }
var p = this.regExpGen(this.constraints);
this.regExp = p;
var partialre = "";
// parse the regexp and produce a new regexp that matches valid subsets
// if the regexp is .* then there's no use in matching subsets since everything is valid
if(p != ".*"){ this.regExp.replace(/\\.|\[\]|\[.*?[^\\]{1}\]|\{.*?\}|\(\?[=:!]|./g,
function (re){
switch(re.charAt(0)){
case '{':
case '+':
case '?':
case '*':
case '^':
case '$':
case '|':
case '(': partialre += re; break;
case ")": partialre += "|$)"; break;
default: partialre += "(?:"+re+"|$)"; break;
}
}
);}
try{ // this is needed for now since the above regexp parsing needs more test verification
"".search(partialre);
}catch(e){ // should never be here unless the original RE is bad or the parsing is bad
partialre = this.regExp;
console.debug('RegExp error in ' + this.declaredClass + ': ' + this.regExp);
} // should never be here unless the original RE is bad or the parsing is bad
this._partialre = "^(?:" + partialre + ")$";
},
setAttribute: function(/*String*/ attr, /*anything*/ value){
this.inherited(arguments);
switch(attr){
case "disabled":
if(this.valueNode){
this.valueNode.disabled = this.disabled;
}
this._refreshState();
break;
case "required":
dijit.setWaiState(this.focusNode,"required", this.required);
this._refreshState();
}
},
postCreate: function(){
if(dojo.isIE){ // IE INPUT tag fontFamily has to be set directly using STYLE
var s = dojo.getComputedStyle(this.focusNode);
if(s){
var ff = s.fontFamily;
if(ff){
this.focusNode.style.fontFamily = ff;
}
}
}
dijit.setWaiState(this.focusNode,"required", this.required);
this.inherited(arguments);
}
}
);
dojo.declare(
"dijit.form.MappedTextBox",
dijit.form.ValidationTextBox,
{
// summary:
// A dijit.form.ValidationTextBox subclass which provides a visible formatted display and a serializable
// value in a hidden input field which is actually sent to the server. The visible display may
// be locale-dependent and interactive. The value sent to the server is stored in a hidden
// input field which uses the `name` attribute declared by the original widget. That value sent
// to the serveris defined by the dijit.form.MappedTextBox.serialize method and is typically
// locale-neutral.
serialize: function(/*anything*/val, /*Object?*/options){
// summary: user replaceable function used to convert the getValue() result to a String
return val.toString ? val.toString() : ""; // String
},
toString: function(){
// summary: display the widget as a printable string using the widget's value
var val = this.filter(this.getValue());
return val != null ? (typeof val == "string" ? val : this.serialize(val, this.constraints)) : ""; // String
},
validate: function(){
if(this.valueNode){ this.valueNode.value = this.toString(); } // test valueNode in case this is called before postCreate runs
return this.inherited(arguments);
},
postCreate: function(){
var textbox = this.textbox;
var valueNode = (this.valueNode = dojo.doc.createElement("input"));
valueNode.setAttribute("type", textbox.type);
valueNode.setAttribute("value", this.toString());
dojo.style(valueNode, "display", "none");
valueNode.name = this.textbox.name;
valueNode.disabled = this.textbox.disabled;
this.textbox.name = this.textbox.name + "_displayed_";
this.textbox.removeAttribute("name");
dojo.place(valueNode, textbox, "after");
this.inherited(arguments);
}
}
);
/*=====
dijit.form.RangeBoundTextBox.__Constraints = function(){
// min: Number
// Minimum signed value. Default is -Infinity
// max: Number
// Maximum signed value. Default is +Infinity
this.min = min;
this.max = max;
}
=====*/
dojo.declare(
"dijit.form.RangeBoundTextBox",
dijit.form.MappedTextBox,
{
// summary:
// A dijit.form.MappedTextBox subclass which defines a range of valid values
//
// constraints: dijit.form.RangeBoundTextBox.__Constraints
//
// rangeMessage: String
// The message to display if value is out-of-range
/*=====
constraints: {},
======*/
rangeMessage: "",
rangeCheck: function(/*Number*/ primitive, /*dijit.form.RangeBoundTextBox.__Constraints*/ constraints){
// summary: user replaceable function used to validate the range of the numeric input value
var isMin = "min" in constraints;
var isMax = "max" in constraints;
if(isMin || isMax){
return (!isMin || this.compare(primitive,constraints.min) >= 0) &&
(!isMax || this.compare(primitive,constraints.max) <= 0);
}
return true; // Boolean
},
isInRange: function(/*Boolean*/ isFocused){
// summary: Need to over-ride with your own validation code in subclasses
return this.rangeCheck(this.getValue(), this.constraints);
},
_isDefinitelyOutOfRange: function(){
// summary:
// Returns true if the value is out of range and will remain
// out of range even if the user types more characters
var val = this.getValue();
var isTooLittle = false;
var isTooMuch = false;
if("min" in this.constraints){
var min = this.constraints.min;
val = this.compare(val, ((typeof min == "number") && min >= 0 && val !=0)? 0 : min);
isTooLittle = (typeof val == "number") && val < 0;
}
if("max" in this.constraints){
var max = this.constraints.max;
val = this.compare(val, ((typeof max != "number") || max > 0)? max : 0);
isTooMuch = (typeof val == "number") && val > 0;
}
return isTooLittle || isTooMuch;
},
_isValidSubset: function(){
return this.inherited(arguments) && !this._isDefinitelyOutOfRange();
},
isValid: function(/*Boolean*/ isFocused){
return this.inherited(arguments) &&
((this._isEmpty(this.textbox.value) && !this.required) || this.isInRange(isFocused)); // Boolean
},
getErrorMessage: function(/*Boolean*/ isFocused){
if(dijit.form.RangeBoundTextBox.superclass.isValid.call(this, false) && !this.isInRange(isFocused)){ return this.rangeMessage; } // String
return this.inherited(arguments);
},
postMixInProperties: function(){
this.inherited(arguments);
if(!this.rangeMessage){
this.messages = dojo.i18n.getLocalization("dijit.form", "validate", this.lang);
this.rangeMessage = this.messages.rangeMessage;
}
},
postCreate: function(){
this.inherited(arguments);
if(this.constraints.min !== undefined){
dijit.setWaiState(this.focusNode, "valuemin", this.constraints.min);
}
if(this.constraints.max !== undefined){
dijit.setWaiState(this.focusNode, "valuemax", this.constraints.max);
}
},
setValue: function(/*Number*/ value, /*Boolean?*/ priorityChange){
dijit.setWaiState(this.focusNode, "valuenow", value);
this.inherited('setValue', arguments);
}
}
);
