Check Lists:Web/Dojo HTML5 vs HTML4 Declarative vs Programmatic: Difference between revisions
No edit summary |
No edit summary |
||
Line 6: | Line 6: | ||
* Some parameters are not presented the same way in HTML (see: placeholder) and dijit (placeHolder, onFocus, onClick) Dijit is case sensitive! | * Some parameters are not presented the same way in HTML (see: placeholder) and dijit (placeHolder, onFocus, onClick) Dijit is case sensitive! | ||
* Some time you need to use the <div> element instead of <input> or <form> | * Some time you need to use the <div> element instead of <input> or <form> | ||
===Validation of entered name=== | |||
This input validation control that something has been entered as name. | |||
Example of Declarative dijit widget for HTML 4: | Example of Declarative dijit widget for HTML 4: | ||
Line 22: | Line 24: | ||
data-dojo-id="firstName"/> | data-dojo-id="firstName"/> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
===Validation of email=== | |||
When it comes to more complex validation the difference become bigger: | |||
In this case validation of an entered email. The validator expects a function therefore it is necessary to wrap the dojox.validate.isEmailAddress() into a call back function. | |||
Example of Declarative dijit widget for HTML 4: | |||
<syntaxhighlight lang="html4strict"> | |||
<input type="text" required="true" name="email" id="email" dojoType="dijit.form.ValidationTextBox" validator="dojox.validate.isEmailAddress" /> | |||
</syntaxhighlight> | |||
Example of Declarative dijit widget for HTML 5: | |||
<syntaxhighlight lang="html4strict"> | |||
<input type="text" name="email" id="email" | |||
data-dojo-type="dijit.form.ValidationTextBox" | |||
data-dojo-props=" required:true, | |||
promptMessage:'Enter Your email', | |||
placeHolder:'Your email', | |||
invalidMessage:'Ooops! You email is not correct!', | |||
validator: function (val){return dojox.validate.isEmailAddress(val)}, | |||
missingMessage:'Ooops! You forgot your email!' " /> | |||
</syntaxhighlight> | |||
The two examples are tested in IE8 and Firefox 3.6.20 | The two examples are tested in IE8 and Firefox 3.6.20 | ||
[[Category:software development]] | [[Category:software development]] |
Revision as of 04:04, 24 August 2011
Dojo and Declarative HTML5
Normally it is possible to find programming examples and Declarative examples on how to define a Dijit widget. However it is more difficult to find Declarative HTML5 examples. This check list might help you to debug your declarative HTML5 widget.
- First you need at least Dojo 1.6.0 to get Dijit widget's to work with HTML5 mark-up (this is valid for most widgets).
- See the two examples below: Are you sure that all relevant parameters are declared in the data-dojo-props element.
- Some parameters are not presented the same way in HTML (see: placeholder) and dijit (placeHolder, onFocus, onClick) Dijit is case sensitive!
- Some time you need to use the <div> element instead of <input> or <form>
Validation of entered name
This input validation control that something has been entered as name.
Example of Declarative dijit widget for HTML 4:
<input type="text" required="true" name="firstName" id="firstName" placeholder="Your Name"
dojoType="dijit.form.ValidationTextBox" missingMessage="Ooops! You forgot your first name!" />
Example of Declarative dijit widget for HTML 5:
<input type="text" name="firstName"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props=" required:true,
promptMessage:'Enter Your Name',
placeHolder:'Your Name',
missingMessage:'Ooops! You forgot your first name!'"
data-dojo-id="firstName"/>
Validation of email
When it comes to more complex validation the difference become bigger: In this case validation of an entered email. The validator expects a function therefore it is necessary to wrap the dojox.validate.isEmailAddress() into a call back function.
Example of Declarative dijit widget for HTML 4:
<input type="text" required="true" name="email" id="email" dojoType="dijit.form.ValidationTextBox" validator="dojox.validate.isEmailAddress" />
Example of Declarative dijit widget for HTML 5:
<input type="text" name="email" id="email"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props=" required:true,
promptMessage:'Enter Your email',
placeHolder:'Your email',
invalidMessage:'Ooops! You email is not correct!',
validator: function (val){return dojox.validate.isEmailAddress(val)},
missingMessage:'Ooops! You forgot your email!' " />
The two examples are tested in IE8 and Firefox 3.6.20