1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    13
    Vote Rating
    0
    uromahn is on a distinguished road

      0  

    Default Issue after form submit with 'Enter' key

    Issue after form submit with 'Enter' key


    Hi Experts!

    I see a very strange issue and after days or reading manuals and posts and scratching my head I still haven't found a solution.

    So here it goes:

    I created a simple login form that has a username/password field and a logon button (don't get irritated when looking at the code - the form is in German).

    My back-end service is a simple Java servlet filter that does the authentication and upon success responds with a URL where to go. The client then sets this new URL and off we go.
    However, when the authentication failed, the server returns a JSON with an error message.
    According to the documentation, the JSON object would look like this:
    Code:
     {
    success: false,
    errors:[{id:'upassword', msg:'Bad credentials'}]
    }
    This will cause the client-side validation to display a tooltip with this error message under my password field.

    Everything works fine and as expected.

    In addition to submit the form upon clicking the "Logon" button, I also wanted to allow users to hit [Enter] (the usual "standard" for most logon screens). So, I added an event handler to both form fields to capture the 'specialkey' event and when ENTER was detected, fire the 'click' event on the "logon" button. So far so good - this also worked fine.

    Now, when I submit the form by hitting [Enter], the JSON still returns the same message as above, BUT no tooltip with the error is being shown!! In other words, it appears that in this case no client side validation is happening.

    Is there anything that I overlooked?

    Below is my code:

    Code:
    /*
     * Login Form using extjs Form class
     */
    Ext.onReady(function(){
        Ext.QuickTips.init();
        Ext.QuickTips.enable();
        
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'under';
    
        var loginForm = new Ext.FormPanel({
            frame: true,
            title:'Anmelden',
            labelAlign: 'right',
            labelWidth: 120,
            width:400,
            waitMsgTarget: true,
            defaultType: 'textfield'
        });
        
        var unameField = new Ext.form.TextField({
            fieldLabel: 'Benutzer Name',
            id:'uname',
            name: 'j_username',
            allowBlank:false,
            blankText:'Benutzer Name kann nicht leer sein!'
        });
        
        var pwdField = new Ext.form.TextField({
            fieldLabel: 'Passwort',
            id:'upassword',
            name: 'j_password',
            inputType:'password',
            allowBlank:false,
            blankText:'Passwort kann nicht leer sein!'            
        });
        
        loginForm.add(unameField);
        loginForm.add(pwdField);
        
        // explicit add of the login button
        var logonBtn = loginForm.addButton({
            text: 'Anmelden',
            id:'logonBtn',
            disabled:false,
            listeners: {click: loginHandler}
        });
    
        // add a special handler for the text fields to allow submit on enter
        unameField.on('specialkey', function(f, event) {
            if(event.getKey() == event.ENTER) {
                logonBtn.fireEvent("click", logonBtn);
            }
        }, this);
        
        pwdField.on('specialkey', function(f, event) {
            if(event.getKey() == event.ENTER) {
                logonBtn.fireEvent("click", logonBtn);
            }
        }, this);
        
        loginForm.on({
            actioncomplete: function(form, action) {
                    var result = action.result;
                    var url = result.url;
                    window.location.pathname = url;            
            },
            actionfailed: function(form, action) {
                    var result = action.result;
                    var userNameField = Ext.get('uname');
                    userNameField.focus();
                    loginForm.render();
            }
        });
        
        loginForm.render('loginForm');
    
        var userNameField = Ext.get('uname');
        userNameField.focus();
        
        function loginHandler() {
            loginForm.getForm().submit({
                url:'j_acegi_security_check?ajax=true',
                waitMsg:'Anmleden...'
    /*
                success: function(form, action) {
                    var result = action.result;
                    var url = result.url;
                    window.location.pathname = url;
                },
                failure: function(form, action) {
                    var result = action.result;
                    var userNameField = Ext.get('uname');
                    userNameField.focus();
                    loginForm.render();
                }
    */
            });    
        }
    })
    As you can see, I tried both ways to catch the result - either with a callback in my submit and alternatively in the 'actioncomplete' and 'actionfailed' events of the form.
    Both alternatives show the same result.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try calling loginBtn.focus() before firing the click event.

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    13
    Vote Rating
    0
    uromahn is on a distinguished road

      0  

    Default Solved!

    Solved!


    That did the trick - thanks Condor!

    I would have never guessed that the solution could be so easy.

Thread Participants: 1