Login Register

TextBox family: Validation, Currency, Number, Date, Time

These widgets augment the functionality of the <INPUT type="text"> tag. The base widget dijit.form.Textbox by itself can trim, change case, and require input. dijit.form.ValidationTextbox extends this by validating the input when the box loses focus. The other widgets further extend the validation function with range and format checking. Internal to the MappedTextBox widget subclass are two INPUT elements. One interacts with the user obeying local customs, the other is hidden and represents the named form element to submit data to the server using a normalized serialization. By default, the widget will discover the appropriate locale and behavior as specified by Dojo.

For example, when using a NumberTextBox in the United States, an optional comma is used for the thousands separator and a period for a decimal separator when interacting with the user. For German users, a period is used for the thousands separator and a comma for the decimal separator. Other locales may have different conventions. When sending data to the server or interpreting the "value" attribute, numbers are represented simply as JavaScript formats them with a period for decimal and no thousands separators. This representation is unambiguous, so other applications may interact with this data without assuming any locale-specific behavior. With DateTextBox, a subset of the ISO-8601 format (e.g. 12-31-2006) is used for the value attribute. For CurrencyTextBox, a number is transmitted, and it is the responsibility of the developer to associate the ISO-4217 country code with the amount to qualify what type of currency is indicated. All of these behaviors are considered Dojo and JSON best practices, but may be customized as described below.

Constraints

To override the defaults, you can use the "constraints" attribute. "constraints" is an object passed to functions responsible for validating, parsing, and formatting the data in the box, and various properties may be provided to override system or locale-specific defaults. Constraints are handled in Dojo low-level routines in dojo.date, dojo.currency and dojo.number, and you can refer to the API documentation for complete details. We summarize them here for convenience:

For CurrencyTextBox and NumberTextBox:

  • currency: (currency only) the ISO-4217 currency code, a three letter sequence like "USD" See http://en.wikipedia.org/wiki/ISO_4217
  • fractional: (currency only) where places are implied by pattern or explicit 'places' parameter, whether to include the fractional portion.
  • locale: override the locale on this widget only, choosing from djConfig.extraLocale
  • pattern: override localized convention with this pattern. As a result, all users will see the same behavior, regardless of locale, and your application may not be globalized. See http://www.unicode.org/reports/tr35/#Number_Format_Patterns.
  • places: number of decimal places to accept.
  • strict: strict parsing, false by default. When strict mode is false, certain allowances are made to be more tolerant of user input, such as 'am' instead of 'a.m.', some white space may be optional, etc.
  • symbol: (currency only) override currency symbol. Normally, will be looked up in localized table of supported currencies (dojo.cldr) 3-letter ISO 4217 currency code will be used if not found.
  • type: choose a format type based on the locale from the following: decimal, scientific (not yet supported), percent, currency. decimal by default.

For DateTextBox and TimeTextBox:

  • am,pm: override strings for am/pm in times
  • clickableIncrement (TimeTextBox): ISO-8601 string representing the amount by which every clickable element in the time picker increases. Set in non-Zulu time, without a time zone. Example: "T00:15:00" creates 15 minute increments. Must divide visibleIncrement evenly.
  • datePattern,timePattern: override localized convention with this pattern. As a result, all users will see the same behavior, regardless of locale, and your application may not be globalized. See http://www.unicode.org/reports/tr35/#Date_Format_Patterns
  • formatLength: choose from formats appropriate to the locale -- long, short, medium or full (plus any custom additions). Defaults to 'short'
  • locale: override the locale on this widget only, choosing from djConfig.extraLocale
  • selector: choice of 'time', 'date' (default: date and time)
  • strict: false by default. If true, parsing matches exactly by regular expression. If false, more tolerant matching is used for abbreviations and some white space.
  • visibleIncrement (TimeTextBox): ISO-8601-style string representing the amount by which every element with a visible time in the time picker increases. Set in non Zulu time, without a time zone or date. Example: "T01:00:00" creates text in every 1 hour increment.
  • visibleRange (TimeTextBox): ISO-8601 string representing the range of this time picker. The time picker will only display times in this range. Example: "T05:00:00" displays 5 hours of options

Examples

dijit.form.TextBox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TextBox Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.TextBox");
    </script>
</head>
<body class="tundra">
        <input type="text" name="firstname" value="testing testing"
                dojoType="dijit.form.TextBox"
                trim="true"
                propercase="true" />

</body></html>

dijit.form.DateTextBox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Textarea Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.form.DateTextBox");
    </script>
</head>
<body class="tundra">
        <input type="text" name="date1" value="2005-12-30"
                dojoType="dijit.form.DateTextBox"
                required="true" />

</body></html>

dojo.form.CurrencyTextBox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CurrencyTextBox Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.CurrencyTextBox");
    </script>
</head>
<body class="tundra">
    <form method="post">
        <input type="text" name="income1" value="54775.53"
                dojoType="dijit.form.CurrencyTextBox"
                required="true"
                constraints="{fractional:true}"
                currency="USD"
                invalidMessage="Invalid amount.  Include dollar sign, commas, and cents." />

    <input type="submit" value="Go!"/>
    </form>
</body></html>

The value attribute is a floating point number. This means that you can easily build CurrencyTextBoxes for a wide range of currencies without having to set a different value for each currency format. fractional is still set to true, but it is set inside the constraints object instead of on the widget.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NumberTextBox Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.NumberTextBox");
    </script>
</head>
<body class="tundra">
        <input id="q05" type="text"
                dojoType="dijit.form.NumberTextBox"
                name= "elevation"
                value="3000"
                constraints="{min:-20000,max:20000,places:0}"
                promptMessage= "Enter a value between -20000 and +20000"
                required= "true"
                invalidMessage= "Invalid elevation."
                />

</body></html>

dijit.form.ValidationTextBox

ValidationTextBoxes usually use Regular Expression validation, as in the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ValidationTextBox Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.ValidationTextBox");
    </script>
</head>
<body class="tundra">
        <input type="text" name="phone" class="medium" value="someTestString"
                dojoType="dijit.form.ValidationTextBox"
                regExp="[\w]+"
                required="true"
                invalidMessage="Invalid Non-Space Text.">

</body></html>

The regular expression syntax comes directly from JavaScript. The start and ending qualifiers of the regular expression, ^ and $, are implicit - you do not need to include them. This code demonstrates a ValidationTextBox that only accepts a 5 digit zip code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ValidationTextBox Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.ValidationTextBox");
    </script>
</head>
<body class="tundra">
        <input type="text" name="zip" value="00000"
                dojoType="dijit.form.ValidationTextBox"
                regExp="\d{5}"
                required="true"
                invalidMessage="Invalid zip code.">

</body></html>

ValidationTextBox also supports functions that generate regular expressions. Having a generating function enables you to write much more dynamic Web applications. ValidationTextBox passes its constraints object to the generating function. The following code demonstrates a dynamic ValidationTextBox that only accepts a 5 digit zip code after 5:00PM, and only accepts a county name before then.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ValidationTextBox Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.ValidationTextBox");
           function after5(constraints){
                   var date=new Date();
                   if(date.getHours() >= 17){
                          return "\\d{5}";
                   }else{
                          return "\\D+";
                   }
                }
    </script>
</head>
<body class="tundra">
        <input type="text" name="zip" value="00000"
                dojoType="dijit.form.ValidationTextBox"
                regExpGen="after5"
                required="true"
                invalidMessage="Zip codes after 5, county name before then." />

</body></html>

The attributes of dijit.form.TextBox apply to all types of text boxes:

dijit.form.TextBox
A generic textbox field. Serves as a base class to derive more specialized functionality in subclasses.
Attributes
lowercase Boolean
false
Converts all characters to lowercase if true. Default is false.
maxlength String HTML INPUT tag maxlength declaration. Updated in 1.0: Attribute is now called "maxLength" for greater browser compatability.
propercase Boolean
false
Converts the first character of each word to uppercase if true.
size String HTML INPUT tag size declaration. Updated in 1.0: size is simply copied to the widget. It's not used by TextBox.
trim Boolean
false
Removes leading and trailing whitespace if true.
uppercase Boolean
false
Converts all characters to uppercase if true.
Methods
String getDisplayedValue() New in 1.0: the displayed value, as opposed to the Value parameter passed via the form.
setDisplayedValue(/*String*/value) Set the displayed value and fire IncrementalChange (see dijit..form._FormWidget)
setValue(value, /*Boolean, optional*/ priorityChange, /*String, optional*/ formattedValue) Sets the value

dijit.form.ValidationTextBox
Use this widget for validation when you write your own validation routine or regular expression.
Attributes
constraints Object
{}
user-defined object used to pass parameters to the validator functions. In markup, this attribute must be defined using JavaScript Object syntax with curly braces and quoting as appropriate for strings. See the section above for details.
invalidMessage String
locale dep.
The message to display if value is invalid.
promptMessage String Hint string
rangeMessage String The message to display if value is out-of-range Removed in 1.0
regExp String
.*
ValidationTextBox only - no subclasses. Regular expression string used to validate the input. Do not specify both regExp and regExpGen
required Boolean
false
Can be true or false, default is false.
Extension Points
displayMessage(/*String*/ message) User overridable method to display validation errors/hints. By default uses a tooltip.
String getErrorMessage(/* Boolean*/ isFocused) return an error message to show if appropriate
String getPromptMessage(/* Boolean*/ isFocused) return a hint to show if appropriate
Boolean isValid(/* Boolean*/ isFocused) Over-ride with your own validation code in subclasses. Use this.textbox.value to get the value.
String regExpGen(/* Object */constraints) ValidationTextBox only - no subclasses. User replaceable function used to generate regExp when dependent on constraints. Do not specify both regExp and regExpGen currently displayed message


dijit.form.DateTextBox, dijit.form.TimeTextBox
Text boxes which allow input of dates and times, with popups to assist in making a selection. Local conventions are used when interacting with the user. ISO-8601 format is used when sending data to and from the server (notably the value attribute). See RangeTextBox, ValidationTextBox and TextBox above for additional attributes and methods.
Attributes
value String Date to display. Defaults to current time and date. Can be a Date object or an ISO-8601 string. If you specify a time zone as an offset from GMT (e.g. "-01:00"), the time will be converted to the local time. Otherwise, the time is considered to be in the local time zone. If you specify the date and isDate is true, the date is used. Example: if your local time zone is GMT -05:00, "T10:00:00" becomes "T10:00:00-05:00" (considered to be local time), "T10:00:00-01:00" becomes "T06:00:00-05:00" (4 hour difference), "T10:00:00Z" becomes "T05:00:00-05:00" (5 hour difference between Zulu and local time) "yyyy-mm-ddThh:mm:ss" is the format to set the date and time Example: "2007-06-01T09:00:00"
Extension Points
Integer compare(/* Object */val1, /* Object */val2) compare 2 values and return negative number for less than, 0 for equal, positive number for greater than
Boolean isInRange(/* Boolean*/ isFocused) Need to over-ride with your own validation code in subclasses. Return true if current value is in range.


dijit.form.NumberTextBox
A validating, serializable, range-bound text box. Local conventions are used when interacting with the user. JavaScript Number.toString() is used to serialize data to the server ("." for decimal point, no other notation) See ValidationTextBox and TextBox above for additional attributes and methods.
Extension Points
Integer compare(/* Object */val1, /* Object */val2) compare 2 values and return negative number for less than, 0 for equal, positive number for greater than
Boolean isInRange(/* Boolean*/ isFocused) Need to over-ride with your own validation code in subclasses. Return true if current value is in range.

dijit.form.CurrencyTextBox
Like NumberTextBox but formats with currency. Data is serialized as a number only; developer is responsible for conveying currency information. It is recommended to pass ISO-4217 data with all currency transactions. See ValidationTextBox and TextBox above for additional attributes and methods.
Attributes
currency String the ISO4217 currency code, a three letter sequence like "USD" See http://en.wikipedia.org/wiki/ISO_4217
Extension Points
Integer compare(/* Object */val1, /* Object */val2) compare 2 values and return negative number for less than, 0 for equal, positive number for greater than
Boolean isInRange(/* Boolean*/ isFocused) Need to over-ride with your own validation code in subclasses. Return true if current value is in range.

Sending and Receiving Server Formats

Patterns given as constraints in a DateTextBox or NumberBox only apply to the on-screen value, not the value received or sent to the server. Dojo encourages the use of standard, locale-neutral formats when marshalling data as best practice. In some cases, the receiving application may have special requirements. A shim on the server can do the necessary translation, but it is also possible to create a custom widget to use a different format. For example when Oracle database processes dates, by default it insists on dd-MMM-yyyy format in English, as in 01-APR-2006. If you wish to send it in this format, you can override the serialize method of DateTextBox. Here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        @import "/dojoroot/dijit/themes/tundra/tundra.css";
        @import "/dojoroot/dojo/dojo.css"
    </style>
    <script type="text/javascript" src="/dojoroot/dojo/dojo.js"
                djConfig="parseOnLoad: true">
</script>
   <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.DateTextBox");
       
       dojo.declare("OracleDateTextBox",[dijit.form.DateTextBox], {
          serialize: function(d, options) {
             return dojo.date.locale.format(d, {selector:'date', datePattern:'dd-MMM-yyyy'}).toLowerCase();
           }
       });
    </script>
</head>
<body class="tundra">
    <form>     
    <input dojoType="OracleDateTextBox" name="mydate" value="2006-04-01"/>
    <input type="submit" value="go"/>
    </form>         
</body></html>

You can also pull the OracleDateTextBox widget into a module and dojo.require it in your pages. Similar customization is possible with numbers, although the default Javascript number representation tends to be less of an issue.

Since Dojo is open source and the widgets are fully customizable, if you really want to use a custom protocol to communicate to and from a server, you can simply override the necessary methods. Here's an example of a DateTextBox subclass that uses a custom date format.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DateTextBox subclass Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript"
        src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="isDebug: false, parseOnLoad: false">

    </script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.form.DateTextBox");
        // subclass DateTextBox to allow the initial value to be specified
        // as MM/dd/y instead of yyyy-MM-dd in the markup
        dojo.addOnLoad(function(){
                dojo.declare("altDateTextBox", dijit.form.DateTextBox, {
                        serialize: function(value, constraints){
                                // overrides to send the date to the server with a format of constraints.datePattern
                                // instead of calling dojo.date.stamp.toISOString
                                return dojo.date.locale.format(value, constraints);
                        },
                        postMixInProperties: function(){
                                this.inherited(arguments);
                                this.constraints.datePattern = "MM/dd/y";
                                if(this.srcNodeRef){
                                        // reparse the value attribute using constraints.datePattern
                                        // instead of calling dojo.date.stamp.fromISOString
                                        var item = this.srcNodeRef.attributes.getNamedItem('value');
                                        if(item){
                                                this.value = dojo.date.locale.parse(item.value, this.constraints);
                                        }
                                }
                        }
                });
                dojo.parser.parse();
        });
    </script>
</head>
<body class="tundra">
        <input id="markup" dojoType="altDateTextBox" value="12/31/2007">
        <button onclick="alert('value serialized to ' + dijit.byId('markup').toString());return false">Serialize</button>
</body>
</html>

Accessibility

Keyboard

ActionKeyComments
Move focus to the next widget in the tab order.Tab
Move focus to the prior widget in the tab order.Shift+Tab
Submit the form.Enter
Revert the last entry.EscIf the user has not entered data, the Esc key is ignored.

Screen Readers

If an invalid value is entered into a validating Text Box the "state" of the Text box changes, i.e. its background color changes. To accomodate users who are blind, the Text Box's ARIA state is changed to "invalid" so a screen reader can notify the screen reader user. In addition to the "state" change, a pop-up appears. When the pop-up appears screen readers should read the contents of the pop-up. The pop-up text comes from the "invalidMessage" parameter.

Known Issues

Sometimes the popup message supplied by invalidMessage attribute may be unnecessary. For example, omitting a required field already displays an icon when the cursor leaves the field. In these cases you can omit the "invalidMessage" parameter, but keep in mind that good labels and instructions are still necessary for accessibility, i.e. if the invalid popup will not be displayed then there must be clear instructional text indicating the field is required.

UPDATED for 1.0: Window-Eyes 6.1 speaks "read only" for fields that have been marked with the ARIA property invalid=true even though the field is still editable.

Attribute "valuenow" for ValidationTextBox

I did not see any documentation related to the attribute "valuenow". This attribute appears to be the only way to obtain the current value of the ValidationTextBox. It can be accessed through:

theValue = dojo.byId(myID).getAttribute('valuenow');

where myID is the HTML ID attribute you assigned to your widget.

I spent a number of hours trying to hunt this down, so maybe this will be helpful to someone else.

If there is a better way to accomplish this, please post it here.

-=> Gregg <=-

How about getValue()?

valuenow is for a11y. I suppose that would work as well, but I think it is intentionally not documented?

Attribute "valuenow" for ValidationTextBox

Method getValue() doesn't work for me. I just get back that it is undefined. I'm using 0.9.

are you sure you have a reference to the widget?

Do a dijit.byNode or dijit.byId to get the widget, then it should work. If you try calling getValue directly on the node, it will fail.

not sure what is meant by

not sure what is meant by 'isDate' in the TimeTextBox description

Cleaning up user input before validation takes place

What is the recommended way to fix up the contents of user input before applying validation? Three examples:
- in date entry, I'd like to convert user input like "tomorrow" and "next monday" into a valid date string.
- In a entry box for entering a hours:minutes value, I'd like to allow user enter time in any format, such as "12:00", "12.00" or "1200". After validation, the value should always read "12:00".
- In a decimal input field, I'd like to convert "3.50" into "3,50" automatically.
Numerous other examples exist.

Why? I don't want to force the user to perform frustrating extra work just to make my software happy. I want happy customers, not happy software.

One option certainly is overriding the isValid() function. From a design point of view, I would not like to change the state of the widget in this method, but if that's the only way, I'll go with it. Any recommendations?

We kept the options limited, but you can expand them

One of the reasons we kept the options limited is because it's very difficult to do the things above in a way which will work for all cultures and without ambiguity (though it has been requested) But you do have the flexibility to provide your own transformations. How about just replacing the validator routine, perhaps then chaining up to the original one (sometimes called "before advice")? If you have other suggestions, let's discuss in the Dijit forum.

Note some layout changes in 1.0

Went a bit batty with Dojo 1.0 trying to get my textboxes to conform to a same width.

According to:
http://www.dojotoolkit.org/book/dojo-porting-guide-0-9-x-1-0/dijit

Slap in a:

style="width: 12em;"

or what have you.

Figured adding this here would be useful, as I had to search quite high and low to find this.

I totally agree!

was also in heavy need for this - guess this is one of the first questions that arise after having some nice dojo input forms :-)

Can not able to post the value in the validation textbox

I using the validation textbox but can not able to post the form data.

need more information

you may want to post your question on the forums

validation

I am using the validation textbox in my perl project.
I want to validate the register parameters(name,email,etc) before click event of submit button.
while using it i am not able to post the data from the textbox.
While not using dojo (simple input) it works fine(posting the data to server) and i am able to login.

on the forums, please

We still would need a lot more information to troubleshoot this, possibly including some code. Please use the Dijit support forum: http://dojotoolkit.org/forums/forums/support/dijit

CSS is important

Be sure to use the dojo and dijit CSS files, either as supplied or with overrides, to ensure the messages are displayed and cleared properly during entry.

Intelligent date field

It would be great to be able to entre the date in various way then be translate automatically on onBlur based on a new output pattern attribute "datePattern".
Let me explain with datePattern = "mm/dd/yyyy":
I click in the date field and type either:
April 02 08
or
April 02
or
Apr 02
or
Apr 02 08
or
040208
or
04022008

Then on onBlur event the date field value would change to 04/02/2008 (because datePattern = "mm/dd/yyyy")

Another idea would be to be able to use auto calculation.
For instance if today's date = 8th of March:
the text +7 would update the date field to 03/15/2008.
-7 would return 03/01/08

This could be extand to +7d-2m+1y => 01/01/2009

Very usefull for web apps with high use of date such as : calendar, appointment, travel web site.
tomorrow would be as simple as typing "1" or today by typing "0"

Babas

dijit.form.DateTextBox setValue()

The documentation here for dijit.form.DateTextBox setValue needs to show the value expected needs to be a JavaScript Date object. I've wasted a couple of hours with trial and error.

see _DateTimeTextBox, line 67

setValue: function(/*Date*/ value, /*Boolean?*/ priorityChange, /*String?*/ formattedValue){

or the nearly complete API docs.

http://redesign.dojotoolkit.org/jsdoc/dijit/HEAD/dijit.form.DateTextBox

I'll add an extra comment to the summary to emphasize this.

Minor error

The DateTextBox demo has "Textarea Demo" in the html title tag - might be causing the search page to point here when searching for "Textarea".

Josh