custom form validation using Dojo
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>Na开发者_开发技巧me:</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>
Well dojo only shows the error messages as tooltips not as text messages like live validations which is i think what you are looking for
http://livevalidation.com/examples
But using dojo u cannot get messages as text but only as tooltip red border u can get using validation textboxes and if u want to valdiate on form submit use dojo form rather then html .Dojo form has a function called validate that actually automatically calls internally all dijit widgets and checks if any one of them is invalid and return true and false respectively.You can control submit of your form with this function
Let us consider, we have a dijit Form:-
<form id="formId" data-dojo-type="dijit.form.Form">
...<!--all form widgets are here-->
</form>
and while the user submits the form, you need to validate like below:-
registry.byId("formId").validate(); //returns boolean value
which will return a boolean value - true if all fields are valid, false if any one field is invalid. So, if this returns true, you can proceed with the logic, else you can display some custom error message.
If any dijit form widgets are added dynamically to this form, then first, we need to connect them.
var form = registry.byId("formId");
form.connectChildren(); //connects all child widgets of this form
form..validate(); // returns boolean value
加载中,请稍侯......
精彩评论