This is my page about using dojotools form validation in Joomla. It's not finished, but I can show working validation. Try entering a non-numeric value into a field that should take only a number.
I'm going to make a calculation page for mobile phone plans, using only javascript. This part is not implemented yet ... but it's a problem with a known solution, so it's not as much fun.
I wanted to use existing tools for form validation, and liked dojotools. This page is how I integrated dojotools into Joomla.
To get this working, I configured my editor, JCE, to allow me to add javascript.
Then I modified my template to load (from google) some necessary dojotools files.
I edited the HTML file for my template, and added these lines immediately before the tag </head> immediately below the <head> tag
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
(some of the style definitions in dojo.css clashed with my template: by putting the dojo.css first, the stylesheets loaded later by the joomla template take precedence)
And then just before the </head>
<script src="http://www.google.com/jsapi"></script><script>
google.load("dojo", "1.4.3"); // Load Dojo
</script>
</head>
I'm using the dojo tools form validation method based on markup, meaning the dojotools parser is needed. I thought that to enable the parser on every page would slow down the site, so I load it explicitly only on this page.
Code to load parser (and on this page, this code is inserted immediately after this example text)
<script type="text/javascript">dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
dojo.require("dijit.form.Button");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.TextBox");
</script>
Below, an example of how one of the input fields is coded.
<td><input id="data_charge_1" dojotype="dijit.form.CurrencyTextBox" currency="USD" invalidmessage="Invalid amount." type="text" /></td>
Cap Plan Calculator
| Avg calls per month | |
| Avg minutes per call | |
| Std deviation in calls per month | |
| Monthly data use |
| Plan Name | |||
| Min. charge per month | |||
| call charge per minute | |||
| flagfall | |||
| Percentage of calls expected to be free | |||
| Data charge $ per MB | |||
| Cost |
| < Prev | Next > |
|---|
