4

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 Answers 2

9

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.)

5
  • How would I easily tell which form elements are invalid, so I can tell the user what they have to fix?
    – Jords
    Commented Oct 1, 2010 at 2:36
  • 2
    @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
    Commented Oct 1, 2010 at 2:54
  • 1
    @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
    Commented Oct 1, 2010 at 3:06
  • is there are way to disable the focus shift while form validation?
    – MozenRath
    Commented Aug 29, 2012 at 13:39
  • But this requires all inputs to be placed withing form. Commented Oct 11, 2013 at 9:00
3

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_!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.