Geek Answers Handbook

How to highlight all invalid dijit.form.ValidationTextBoxes in dijit.form.Form?

what I need is a form that submits validation checks and selects all invalid fields and adds tooltips.

I'm really looking for something like this:

dojo.forEach(dijit.byId('myForm')._invalidWidgets, function (thisWidget,index,array) { thisWidget.displayMessage("normal invalid/empty message should go here, seems I should be calling something higher level than this"); });

but I don’t want to dig this depth, all I want to do is run the very same thing that works when you exit an empty required field (exclamation mark and corresponding invalid / empty message). Maybe I should just try to trigger the tab event?

Can someone point me in the right direction?

+4
source share
2 answers

Yes, you're right - you can get all your validation, select and even focus on the first invalid field by simply calling the validate() function in the dijit.form.Form element.

Here is an example in which a validate () call is added to the onSubmit event:

 <head> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dojo.form.Form"); dojo.require("dojo.form.ValidationTextBox"); dojo.require("dojo.form.Button"); // more includes here... </script> </head> <body> <form dojoType="dijit.form.Form" action="..." method="..."> <input dojoType="dijit.form.ValidationTextBox" trim="true" regExp="..." invalidMessage="Oops..."> <!-- // more form elemts here... --> <button type="submit" dojoType="dijit.form.Button" ...> Submit </button> <script type="dojo/method" event="onSubmit"> if (!this.validate()) { alert("Form contains invalid data. Please correct...."); return false; } return true; <script> </form> </body>

I hope you find this helpful.

Greetings.

Follow-up: Here is an example of an input field that can be used to prompt the user about what data is expected, and will warn them that the verification failed:

 <input type="text" id="EXT" name="EXT" value="" maxLength="10" dojoType="dijit.form.ValidationTextBox" regExp="\d+?" trim="true" promptMessage="<p class='help'>Please your extension. (ie "1234")</p>" invalidMessage="<p class='help'>The extension field should contain only numbers.</p>">

This is a declarative example. (I made a mistake in this in my original answer below.)

+9
source

jthomas_ at # dojo on irc.freenode.net answered my question. Turns out I wanted to use dijit.byId('myForm').validate() , which does everything I wanted in one fell swoop. Thank jthomas _

+3
source

More articles:


All Articles