Login Form: Disable 'submit' until username has been input

[cornflakes]

If this has been discussed elsewhere, please let me know and I'll move/remove this post.

Currently, I have a login form and would like to disable the 'submit' button until the user has input a username (and password) in the text fields. Any ideas on how I can do this?

Thanks in advance.

[devnull]

'monitorValid' in FormPanel and 'formBind' in Button are designed to do just this when combined with field validation.

[cornflakes]

Thanks, devnull but I don't see formBind in the API docs for Button. Where can I find this?

[devnull]

It apparently is not listed in the Button API docs, but is talked about in the monitorValid docs for formPanel.
You'll probably find alot of examples here of you search for formBind.

[cornflakes]

Ok, thanks.

I have set both monitorValid (in FormPanel) and formBind (in the submit Button) and the button is still active. Any ideas?

The code is:

Ext.onReady( function()
    {
        var login = new Ext.form.FormPanel(
        {
            labelWidth :90,
            url :'<%=request.getContextPath()%>/j_security_check',
            method :'POST',
            id :'_loginForm',
            standardSubmit :true,
            frame :true,
            title :'Login',
            bodyStyle :'padding:5px 5px 0',
            iconCls :'user-suit',
            width :350,
            monitorValid:true, <------------------- monitorValid
            keys:
            [
                {
                    key: Ext.EventObject.ENTER,
                    fn: function()
                    {
                        var sb = Ext.getCmp('my-status');
                        sb.showBusy();
                        document.getElementsByTagName("form")[1].action = "<%=request.getContextPath()%>/j_security_check";
                        document.getElementsByTagName("form")[1].submit();
                    }
                }
            ],
            defaults :
            {
                <%-- 
                    enter defaults here
                    width :230 
                --%>
            },
            defaultType :'textfield',
            items :
            [
                {
                    fieldLabel :'Username',
                    name :'j_username',
                    id :'j_username',
                    allowBlank :false
                },
                {
                    fieldLabel :'Password',
                    name :'j_password',
                    id :'j_password',
                    allowblank :false,
                    inputType :'password'
                },{
                    fieldLabel: 'Remember Me',
                    boxLabel : 'rememberMe',
                    name : 'rememberMe',
                    inputType: 'checkbox'
                },{
                    xtype :'panel',
                    buttonAlign :'right',
                    width :340,
                    buttons :
                    [
                        {
                            text :'Signup',
                            type :'signup',
                            minWidth: 75,
                            handler :function()
                            {
                                document.getElementsByTagName("form")[1].action = "<%=request.getContextPath()%>/register.html";
                                document.getElementsByTagName("form")[1].submit();
                            }
                        },
                        {
                            text :'Login',
                            formBind:true, <------------------- formBind
                            type :'submit',
                            minWidth: 75,
                            handler :function()
                            {
                                var sb = Ext.getCmp('my-status');
                                sb.showBusy();
                                document.getElementsByTagName("form")[1].action = "<%=request.getContextPath()%>/j_security_check";
                                document.getElementsByTagName("form")[1].submit();
                            }                    
                        }
                    ]
                }
            ],
           bbar: new Ext.StatusBar(
            {
                id: 'my-status',
                text: 'Ready',
                iconCls: 'default-icon',
                busyText: 'Validating...'
        <%
            if (!(request.getParameter("login_error") == null))
            {
                String errorMsg = request.getSession().getAttribute("SPRING_SECURITY_LAST_EXCEPTION").toString();
                errorMsg = errorMsg.substring(errorMsg.indexOf(':') + 1, errorMsg.length());
        %>
                ,items:
                [
                    '<div style=\'color: red; vertical-align: top; padding-right: 5px;\'><%=errorMsg%><br/></div>'
                ]
        <%    } %>
            })
        });
        login.render(document.getElementById('_login'));
    });

[cornflakes]

I think I know the problem. The buttons (with formBind:true) cannot be declared inside the xtype:'panel'. Instead, buttons should be declared directly in the FormPanel. This changes the layout a little, but the button is now disabled as it should be (until the user enters text in the text fields where allowBlank is false).

So, the steps taken to have the button disabled are:

1. set monitorValid:true in FormPanel
2. declare buttons in FormPanel
3. set formBind:true in the button
4. set allowBlank:false in the fields used to determine the status of the button.

[cornflakes]

For anyone who wants it, the code to get this to work is (ignore the scriplets or comment them out):

Ext.onReady( function()
    {
        Ext.QuickTips.init();
        
        var login = new Ext.FormPanel(
        {
            labelWidth :90,
            url :'<%=request.getContextPath()%>/j_security_check',
            method :'POST',
            id :'_loginForm',
            standardSubmit :true,
            frame :true,
            title :'Login',
            bodyStyle :'padding:5px 5px 0',
            iconCls :'user-suit',
            width :350,
            monitorValid:true,
            keys:
            [
                {
                    key: Ext.EventObject.ENTER,
                    fn: function()
                    {
                        var sb = Ext.getCmp('my-status');
                        sb.showBusy();
                        document.getElementsByTagName("form")[1].action = "<%=request.getContextPath()%>/j_security_check";
                        document.getElementsByTagName("form")[1].submit();
                    }
                }
            ],
            defaults :
            {
                <%-- 
                    enter defaults here
                    width :230 
                --%>
            },
            defaultType :'textfield',
            items :
            [
                {
                    fieldLabel :'Username',
                    name :'j_username',
                    id :'j_username',
                    allowBlank :false
                },
                {
                    fieldLabel :'Password',
                    name :'j_password',
                    id :'j_password',
                    allowBlank :false,
                    inputType :'password'
                },{
                    fieldLabel: 'Remember Me',
                    boxLabel : 'rememberMe',
                    name : 'rememberMe',
                    inputType: 'checkbox'
                }
                    
            ],
            
            buttons :
                    [
                        {
                            text :'Register',
                            type :'register',
                            minWidth: 75,
                            handler :function()
                            {
                                document.getElementsByTagName("form")[1].action = "<%=request.getContextPath()%>/register.html";
                                document.getElementsByTagName("form")[1].submit();
                            }
                        },
                        {
                            text :'Login',
                            formBind:true,
                            type :'submit',
                            minWidth: 75,
                            handler :function()
                            {
                                var sb = Ext.getCmp('my-status');
                                sb.showBusy();
                                document.getElementsByTagName("form")[1].action = "<%=request.getContextPath()%>/j_security_check";
                                document.getElementsByTagName("form")[1].submit();
                            }                    
                        }
                    ],
                    
           bbar: new Ext.StatusBar(
            {
                id: 'my-status',
                text: 'Ready',
                iconCls: 'default-icon',
                busyText: 'Validating...'
        <%
            if (!(request.getParameter("login_error") == null))
            {
                String errorMsg = request.getSession().getAttribute("SPRING_SECURITY_LAST_EXCEPTION").toString();
                errorMsg = errorMsg.substring(errorMsg.indexOf(':') + 1, errorMsg.length());
        %>
                ,items:
                [
                    '<div style=\'color: red; vertical-align: top; padding-right: 5px;\'><%=errorMsg%><br/></div>'
                ]
        <%    } %>
            })
        });
        login.render(document.getElementById('_login'));
    });

Any ideas on how I can move that status indicator to the bottom of the form? I can do this if I use the approach above (see code example earlier in this post), but then I cannot disable the button.

[Animal]

The correct way is to set monitorValid: true, and subscribe to http://extjs.com/deploy/dev/docs/?cl...ientvalidation

[cornflakes]

Thanks Animal.

The issue I am having is if I use the first code snippet, the button is never disabled. When using the second code snippet, the button is properly disabled (and enabled after correct values have been input into the fields), but the form looks a little odd in that the status bar is above the buttons. Instead, I'm trying to put that status bar below the button.

To summarize, how can I use code snippet 2 but put the status bar to the bottom of the panel (as in code snippet 1)?