为什么即使使用 vtype 的电子邮件验证失败，提交按钮在 extjs 中仍然有效？

Question

下面是带有电子邮箱的 window 面板的 extjs 代码，我使用 vtype:email 来检查验证。该框显示无效电子邮件的错误，但提交按钮仍然有效。如何在用户单击按钮时抛出无效电子邮件错误？

    {
    vtype:'email',
    name: 'email',
    fieldLabel: 'Email',
    allowBlank:false,
    id: 'inviteEmail'
     },{
   xtype: 'button',
    text: 'Send',
    id: 'invitebuttonid',

    handler: function(btn){
    var email = Ext.getCmp('inviteEmail').getValue(); 
    var box = Ext.MessageBox.wait('Sending The Invitation..', 'Inviting User')
        Ext.Ajax.request({
         url: 'url',
               params:{
                   email: email
 },
            timeout: 300000,
            method: 'POST',
            success: function(response, opts){
                var result = Ext.decode(response.responseText);
                if (result.success === true) {
                    Ext.example.msg('Success',  result.message);
                    box.hide();
                }
                else {
                    Ext.Msg.alert('Failed', result.message);
                }
            },
            failure: function(response, opts){
                var result = Ext.decode(response.responseText);
                Ext.Msg.alert('Failed');

            }
        });
    }

Answer 1

提交前检查form.isValid()。您通过获取值并自己发出 Ajax 请求来绕过验证。

尝试

var form = this.up('form');
If (form.isValid()) {
     // your handler code

Answer 2

为了让您的按钮根据表单状态自动激活或停用，您需要添加配置 formBind: true。

{
    xtype: 'button',
    text: 'Send',
    id: 'invitebuttonid',
    formBind: true,
    ...
}

为什么即使使用 vtype 的电子邮件验证失败，提交按钮在 extjs 中仍然有效？

Why submit button still works in extjs even if email validation with vtype is failed?

javascript

extjs