I want to perform some client side form validation and I was thinking to use Dojo to do it.
I want the user to be able to insert what he wants in the text boxes, but when he clicks submit, the form to be validated. If a field is invalid I want to display a red border around the textbox and a message to the right, also in red.
If user clicks on the textbox in error (onfocus), the error message disappears. If he clicks on the error message the textbox receives focus and error message disappears. Again he can insert whatever he wants until validation.
As I understand, Dojo has some default behavior with tooltips and textbox turning yellow if invalid (see example bellow).
Is it possible to do what I want using Dojo or should I roll my own implementation for validation (I mean what would be easier: write some stuff I understand and can control or fight with some yet unknown toolkit)?
If it is possible, how can I do it or where can I find information for doing it?
Thanks!
<html>
<head>
<link rel="stylesheet" type="text/css" href="dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<table style="border: 1px solid black;">
<tr>
<td>Name:</td>
<td>
<input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox" />
</td>
</tr>
<tr>
<td>Date of birth:</td>
<td>
<input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox" />
</td>
</tr>
</table>
<input type="button" name="submitButton" value="Submit" />
</body>
</html>