dijit.Dialog isValid check always true

Question

I've got a dijit.Dialog with two elements that have to be valid to be able to submit it. The Dialog is created programmatically while it's content is specified in the constructor's options hash. The Content does contain declarative widgets and the dialog's parameter parseOnLoad is set to true so that the parser (should) instantiate all widgets followed by calling their startup method. After creating an instance of the dialog, I registered a callback for changes of the validation state:

var dialog = new Dialog({
    title: 'Login',
    parseOnLoad: true,
    content: dialogContent
});
dialog.watch('state', function(){
    //is never called when changing the input fields.
    //onValidStateChange is not being fired either.
});
dialog.startup();
dialog.show();

dialogContent is defined as follows:

<div class="dijitDialogPaneContentArea">
    <table>
        <tr>
            <td>CustomerID: </td>
            <td><div name="user" required="true" trim="true" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props="pattern: '[0-9]{5,7}', _formatter: function(){}"></div></td>
        </tr>
        <tr>
            <td>Password: </td>
            <td><div name="password" type="password" required="true" data-dojo-type="dijit/form/ValidationTextBox"></div></td>
        </tr>
    </table>
</div>
<div class="dijitDialogPaneActionBar">
    <div data-dojo-type="dojox/form/BusyButton" type="submit" data-dojo-props="disabled: true">OK</div>
</div>

Here is a JSFiddle of the situation: http://jsfiddle.net/rSbZP/3/

Like mentioned in the validation-callback method: it's never getting called / fired by the dialog. Calling the isValid() function of the dialog always returned true not matter what the content of the inputfields was, whereas the validate() function always returned the correct result. The dialog's result property is always an empty string. After testing some hours, I recognized that it suddenly starts working when I manually call the dialog's startup() method ...again. I also recognized that the dialog shows up before its widgets are getting instanciated and show up (which is happening around 1 second later), so the dialog's startup() method is called before the child widgets have been instanciated (So the child widget's aren't being started up, I presume?). So I tried to register a callback for the automatically called parser to manually call the startup() method, but I haven't been able to find the Promise or anything else to register to.

After some time, I discovered this workaround (I am using the dialog's onShow event to manually start the parser and register a callback to it):

var dialog = new Dialog({
    title: 'Login',
    parseOnLoad: false,
    content: dialogContent,
    onShow: function(){
        parser.parse().then(function(){
            dialog.startup();
        });
    }
});

By doing this, the dialog's startup() function is called when the parser finishes after manually starting it. Is this the inteded way to do this, am I missing something significant or am I completely wrong with what I am doing?

Answer 1

The Dialog widget is created programmatically. So, you need to connect all child widgets to the Dialog, before validating at dialog level. However, from second time, it will work, but at first time, it would not work as expected. To overcome this, we need to call "connectChildren" method on Dialog before validating. This will ensure that all child widgets at that instant are connected to the Dialog widget node.

testValid = function () {
    dialog.connectChildren();
    alert(dialog.isValid());
};
testValidate = function () {
    dialog.connectChildren();
    alert(dialog.validate());
};

Now check the result, if it is as expected. Please refer the updated jsFiddle