dojo dijit client side validation onchange

Question

So I followed the example in the Dojo - Using the Dojo JavaScript Library to Build Ajax Applications to add server-side validation to the username validationtextbox field on my form. Basically I added a usernameOnChange function that submitted an xhrGet request, the xhrGet returns JSON and is handled by the usernameValidationHandler.

It works great, but the usernameValidationHandler only sets the tooltip display message to an error. It doesn't set the field to be invalid and thus the user can still submit the form. How do I set the field to be invalid so the form won't submit?

    <input type="text" id="userName" name="userName" size="20" 
       dojoType="dijit.form.ValidationTextBox"
       trim="true" 
       required="true" 
       onChange="userNameOnChange"
       regExp="\w+"
       invalidMessage="User name is required"
    />

function userNameOnChange() { 
    var userName = dijit.byId("userName").getValue();
    if (userName == "") {
        return;
    }        
    dojo.xhrGet( { 
        url: "validateUserName.jsp?userName=" + userName,
        handleAs: "json",
        handle: userNameValidationHandler
    });
}

function userNameValidationHandler(response) {
    dijit.byId("userName").displayMessage();

    if (!response.valid) {
     var errorMessage = "User name already taken";
        // Display error message as tooltip next to field
        dijit.byId("userName").displayMessage(errorMessage);
        // HOW DO I SET THE FIELD TO BE INVALID NOW???
    }
}

Answer 1

You could subclass the widget to override the validator method. Perhaps chain up, if you want the base functionality, then, if the result is true, run your own test with the getXhr and return the result.

An example at dojocampus just clobbers the validator method. That might also work, depending on what you want to do.