views:

99

answers:

2

Hi everyone, what I'm after is a form that when submitted, runs a validation check, and highlights all invalid fields and adds the tooltips.

I'm effectively 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 be digging that deep, all I want to do is trigger the same sort of thing that's triggered when you tab out of an empty required field (exclamation icon and appropriate invalid/empty message). Maybe I should just try and fire the tab-out event?

Can someone point me in the right direction?

+2  A: 

jthomas_ in #dojo on irc.freenode.net answered my question. It turns out that I wanted to be using dijit.byId('myForm').validate() which does everything I wanted in one swoop. Thanks, jthomas_!

Aaron B. Russell
+3  A: 

Yes, you're correct - you can get all your validation, highlighting, even focus on the first invalid field by just calling the validate() function on a dijit.form.Form element.

Here's an example where the 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>

Hope, you find it helpful.

Cheers.


Follow-up: Here's an example of an input field that could be used to help prompt a user as to what sort of data is expected, and would alert them when validation fails:

<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. (i.e. "1234")</p>"
    invalidMessage="<p class='help'>The extension field should contain only numbers.</p>">

This is a declarative example. (I misspelled it in my initial response below.)

S.Jones
How would I easily tell which form elements are invalid, so I can tell the user what they have to fix?
Jords
@Jords This type of implementation would automatically highlight all invalid fields and even set the focus to the first incorrect field. If you had a phone extension field for example, you could use the regExp="\d+?" attribute in the ValidationTextBox, and a invalidMessage="The extension field should contain only numbers." attribute would be displayed in an error condition. So, basically you can decoratively define your validation conditions and user messages and/or prompt messages as well.
S.Jones
@Jords I've added an example in the answer above. Note that you can use HTML tags in the 'prompt' and 'invalid' messages to make thing look nice. Hope that helps.
S.Jones