dialog.addkeylistener broken when form.isValid is present

[borg]

I put the validation check in the following code and it seems to no longer allow the keylistener i added for the dialog to work. any ideas?

form validation code: if (!loginForm.isValid())

key listener code: loginDlg.addKeyListener(13, Login.Control, loginDlg);



<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="adapter/yui/ext-yui-adapter.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="ext-all.js"></script>

<script type='text/javascript'>

Login = function() {
var loginDlg,handleSuccess,handleFailure,loginForm;

return {
Init:function() {
loginDlg = new Ext.BasicDialog('login-dlg', {
autoCreate: true,
width: 310,
height: 180,
modal: true,
closable:false,
collapsible:false,
resizable:false,
draggable:true,
shadow:true,
title: 'Login'
});

Ext.QuickTips.init(); // only used if msgTarget under is set to something other than qtips

loginForm = new Ext.form.Form({
labelAlign: 'top' // put label above form field instead of to the left
});

var emailField = new Ext.form.TextField({
fieldLabel: 'Enter your email address',
name: 'email',
id: 'email',
vtype:'email', // validation type
width:250,
allowBlank:false,
msgTarget:'under' // display validation message below textfield
})

loginForm.add(emailField); // add the form field to the form

loginForm.render('form-div'); // render the form
//////////// here's the keylistener code
loginDlg.addKeyListener(13, Login.Control, loginDlg); // enter key submits the form

loginDlg.addButton('Login', Login.Control, loginDlg); // attach a button to the dialog with the form submit controls

loginDlg.show(); // render the dialog

emailField.focus(); // set focus on form field once the dialog has been rendered
},

Control:function() {
///////////// here's the validation check
if (!loginForm.isValid()) // validate the form, seems to remove the keylistener
Ext.MessageBox.alert('Error', 'Please enter a valid email address.');
else {
var wait = Ext.MessageBox.wait('Please Wait...', 'Please Wait...'); // show wait message

handleSuccess = function(o) {
wait.hide(); // hide wait message
if (o.responseText != 'OK') {
Ext.MessageBox.alert('Error', o.responseText);
}
else { // login successful
loginDlg.hide(); // hide login dialog
}
};

handleFailure : function(o) {
wait.hide(); // hide wait message
if (o.responseText !== undefined) {
loginDlg.show();
}
};

var sUrl = "login.php?email=" + Ext.get('email').getValue();

var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, {success:handleSuccess,failure:handleFailure});
}
}
}
}();
Ext.onReady(Login.Init);
</script>

<div id="login-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Login</div>
<div class="x-dlg-bd">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="form-div" style="height: 85px;">

</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>

[mystix]

pls refer to http://extjs.com/forum/showthread.php?t=8887.
thank you. :)

[dotnetCarpenter]

I'm not sure and I haven't tested it but it looks to me that Login.Control will never be called if the input is not valid.

[borg]

Do you know where my call to the "alert box popup for the invalid input" should go if invalid input doesn't call the Control function?

I'm confused because if you click the Login button the popup shows up but if you just hit enter it doesn't. So invalid input doesn't seem to be preventing the form from being submitted since you can still click the button. Why does the keylistener not work when the input is invalid?