Understanding the form in Dojo: Form
Just as "Understanding the interface controls in Dojo
As mentioned in this Article, the dijit Library provides a complete set of extremely powerful and flexible Dojo-based widgets to help you easily enhance web application interfaces and functions. These widgets include the drop-down menu, pop-up menu, dialog box, page layout, tree, progress bar, and form elements. It is clear that dijit makes these controls very beautiful, but this article focuses on their enhanced functions, especially on the usability and effectiveness of a basic form.
Quick review of dijit implementation
The first thing to do to use dijit on a page is to introduce dojo:
<SCRIPT src = "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js.uncompressed.js" djconfig = "isdebug: True, parseonload: True"> </SCRIPT>
Step 2: import the dijit topic style sheet:
The last step is to set a topic name for the class attribute of the Body element:
<Body class = "Claro">
Enhance basic form elements
Note:
: This article uses the declared method to create a widget. You can also use programming methods to create any component. For more information, see dojo. Behavior in "Understanding interface controls in Dojo.
The first step to enhancing our static form is to enhance the form element itself. Dijit provides at least one (sometimes two or three) Corresponding widgets for each form element. Using the declarative creation method of dijit widgets and the dojotype attribute, we can quickly turn everything in a static form into a widget.
<Form action = "process. php" method = "get"> <br/> <! -Text inputs: dijit. form. textbox-> <br/> <B> First name: </B> <br/> <input type = "text" name = "firstname" Placeholder = "Your name" id = "firstname" dojotype = "dijit. form. textbox "/> <br/> <B> Website: </B> <br/> <input type = "text" name = "website" Placeholder = "Your Website" id = "website" dojotype = "dijit. form. textbox "/> <br/> <! -Radio buttons: dijit. form. filteringselect-> <br/> <B> favorite color: </B> <br/> <select name = "color" id = "color" dojotype = "dijit. form. filteringselect "> <br/> <option value =" "> select a color </option> <br/> <option value =" red "> Red </option> <br /> <option value = "green"> green </option> <br/> <option value = "blue"> blue </option> <br/> </SELECT> <br/> <! -Radio buttons: dijit. Form. checkbox-> <br/> <B> send emails? </B> <br/> <input type = "checkbox" id = "checkbox" Checked = "checked" dojotype = "dijit. form. checkbox "/> <br/> <! -Radio buttons: dijit. form. radiobutton-> <br/> <B> email format: </B> <br/> <input type = "radio" id = "radio1" name = "format" Checked = "checked" dojotype = "dijit. form. radiobutton "/> <br/> <label for =" radio1 "> HTML </label> </P> <p> <input type =" radio "id =" Radio2" name = "format" dojotype = "dijit. form. radiobutton "/> <br/> <label for =" Radio2 "> text </label> <br/> <! -Submit button: dijit. form. button-> <br/> <input type = "Submit" value = "Submit Form" label = "Submit Form" id = "submitbutton" dojotype = "dijit. form. button "/> <br/> </form>
Well, now we have put on the topic of static, boring form elements, and have more features. We need to describe the following components:
Now that all basic forms have become widgets and have beautiful themes, we can add basic input verification functions.
Form Verification Using dojo
Like almost all other client problems, Form Verification dojo also provides a very good solution.
Fortunately, Basic Form Verification involves only a few key components.
Dijit. Form. validationtextbox
One of the prerequisites for verifying a form is to determine which elements are required. Assuming that the first input field is required, we only need to change the dojotype of this component from dijit. Form. textbox to dijit. Form. valicationtextbox:
<Input dojotype = "dijit. Form. validationtextbox" required = "true" Placeholder = "Your name" missingmessage = "Ooops! You forgot your first name! "Name =" firstname "id =" firstname "type =" text "/>
Because required = "true" has been added to this widget, once you forget to enter any characters in the input box, an error icon and a prompt will be displayed. You can configure the content of the prompt information by setting the missingmessage attribute. Otherwise, a common error message is displayed.
What if this input box requires special verification of the input mode? The Regexp attribute is useful:
<Input dojotype = "dijit. Form. validationtextbox" required = "true" Regexp = "(HTTPS? | FTP): // [A-Za-z0-9-_] +/. [A-Za-z0-9-_ % &/? ///. =] + "Name =" website "Placeholder =" Your Website "id =" website "type =" text "/>
Currently, this website input box not only requires input, but also the input content must be able to pass the Regexp attribute detection.
Verification tool provided by dojox. Validate
The dojox. Validate library contains a lot of tool functions and regular expressions to verify the values of form elements. These verification functions can be used for email addresses, URLs, phone numbers, postal codes, and many other things. The following is an example of using dojox. Validate on validationtextbox:
<SCRIPT type = "text/JavaScript"> <br/> dojo. require ("dojox. validate "); <br/> dojo. require ("dojox. validate. web "); <br/> </SCRIPT> <br/> <strong> Email: </strong> <br/> <input type = "text" required = "true" name = "email" id = "email" dojotype = "dijit. form. validationtextbox "validator =" dojox. validate. isemailaddress "/>
The validator attribute is a reference to the email verification function. If you are not good at regular expressions, dojox. Validation becomes very useful. Language-specific toolkit is also included. Its API documentation provides a complete list of dojox. Validate tools.
Dijit. Form. Form and Its onsubmit event
Now we have set the required input fields. Next we will use the dojotype dijit. Form. Form to enhance the outermost form element.
Accompanied by dijit. Form. form is a special script element. The script element used only for dojo is a this. Validate () test, acting on the dijit. Form. form instance. This test verifies all require = "true" elements. You can also add your own verification code here.
<Form dojotype = "dijit. form. form "Action =" process. PHP "method =" get "> <br/> <SCRIPT type =" dojo/method "event =" onsubmit "> <br/> <! -<Br/> If (this. Validate () {<br/> alert ('form is valid, submitting! '); <Br/>}else {<br/> alert ('form contains invalid. please complete all required fields. '); <br/> return false; <br/>}< br/> return true; <br/>-> <br/> </SCRIPT> <br/> <! -Form fields here-> <br/> </form>
Dijit. Form tool set
In the above example, I only involve the most commonly used dijit parts. There are more and more powerful form controls in dijit. Let's take a look at several other useful widgets.
Datetextbox
Asking users to correctly format a date is a nightmare, especially when other form elements depend on the value of this date field. Dijit provides a dijit. Form. datetextbox class that displays a user-friendly calendar control that allows users to select dates.
<! -When the user focuses on this element, the calendar appears-> <br/> <input dojotype = "dijit. form. datetextbox "required =" true "invalidmessage =" Please provide a valid date. "type =" text "name =" date "id =" date "/>
Currencytextbox
The dijit. Form. currencytextbox class helps users correctly format and verify currency values based on region settings.
<! -{Fractional: true} means you must provide cents-> <br/> <input dojotype = "dijit. form. currencytextbox "required =" true "constraints =" {fractional: true} "currency =" USD "invalidmessage =" Please provide both dollars and cents. "type =" text "name =" weekly_wages "id =" weekly_wages "value =" 2000 "/>
Textarea
The dojox. Form. textarea class enhances the textarea element, so that the height can be automatically changed when the user inputs it.
<Textarea dojotype = "dijit. Form. textarea" name = "Comments">
Enhance basic dijit components by using alternative components of dojox
Dojox contains a large number of enhanced controls, which are as easy to use as many dijit components and solve problems that many dijit components cannot solve. The following describes several well-known dojox form parts.
Busybutton
Dijit. form. the button is really useful, but if I want to disable this button (avoid repeated submission) and provide a feedback when the user clicks (for example, "submitting a form ......") What about it?
We can use dojox. Form. busybutton to do this:
<! -Assuming dojox. Form. busybutton has been required... -> <Br/> <button dojotype = "dojox. Form. busybutton" busylabel = "sending data... "> <Br/> send data <br/> </button>
Checkedmultiselect
How can we allow multiple select elements?
This is a good opportunity to use the dojox. Form. checkedmultiselect component:
<! -Assuming dojox. Form. checkedmultiselect has been required... -> <Br/> <select multiple = "true" name = "rockers" dojotype = "dojox. form. checkedmultiselect "> <br/> <option value =" Oasis "> oasis </option> <br/> <option value =" Rod Stewart "selected =" selected "> Rod Stewart </option> <br/> <option value = "Coldplay" selected = "selected"> Coldplay </option> <br/> <option value = "Kings of Leon"> kings of Leon </option> <br/> </SELECT>
Passwordvalidator
What if our website needs a form that allows password modification?
Dojox. Form. passwordvalidator provides all the functions required to implement it quickly:
<! -Assuming dojox. Form. passwordvalidator has been required... -> <Br/> <! -Pwvalidate is the name of your function that verifies the current password is correct-> <br/> <Div dojotype = "dojox. form. passwordvalidator "name =" pwvalidate "> <br/> <! -Pwtype = old is where the user must place their current password-> <br/> <input type = "password" pwtype = "old"/> <br/> <! -Pwtype = new is where the proposed new password must be placed-> <br/> <input type = "password" pwtype = "new"/> <br/> <! -Pwtype = new is where the user verifies their new Pass-> <br/> <input type = "password" pwtype = "verify"/> <br/> </div>
Note:
Javascript verification is not a substitute for server-side verification. Javascript only enhances user experience by providing instant response.
Fileuploader
The absence of any enhanced File Upload control may be the worst form control. Dojox. Form. fileuploader provides an excellent solution to make the upload process more reasonable.
<! -Assuming dojox. Form. fileuploader has been required... -> <Br/> <Div class = "uploadbtn" dojotype = "dojox. form. fileuploader "hoverclass =" uploadhover "pressclas =" uploadpress "activeclass =" uploadbtn "disabledclass =" uploaddisable "uploadurl ="/upload-files.php "> select files </div>
Dojox. Form tool set
The dojox. Form namespace contains a large number of enhancement components, including:
Summary
The dijit library not only makes your interface elements shine, but also a huge set of tools that make your, developers, and your users better live.
Related Resources:
Http://www.sitepen.com/blog/2010/08/11/dive-into-dijit-forms/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
