文本字段为空时显示错误消息，并在鼠标悬停时显示

Question

第一个工作为例外。我试图借用相同的想法，当用户尝试尝试使用空白值时显示错误消息。 我有几个文本字段，我想在用户点击保存按钮时显示一条错误消息，其中必填字段为空或者在单击该选项卡上的光标后留空 并且不在文本字段中输入任何内容并转到下一个文本字段。任何帮助，将不胜感激。

//First  code snippet  working propely. 
this.nameField = new Ext.form.TextField({
    fieldLabel:getMsg('testXml','global.name')
		,allowBlank:false
		,cls:'c-form-field-required'
		,name:'Name'			
		,blankText: testQR.getMsg('testXml','address.nameV')
    ,maxLength:100
});
	
this.formPanel = new Ext.form.FormPanel({
    labelWidth: 100
    ,labelPad: 10
    ,labelAlign: 'right'
    ,bodyBorder: false
    ,trackResetOnLoad: true
    ,cls: 'testQR-form-panel'
    ,autoScroll: true
    ,defaults: {
	width: 200
	,msgTarget: 'under'
	,emptyClass: 'c-form-empty-field'
	,invalidClass: 'c-form-invalid'
	,validateOnBlur: true
	,validationEvent: 'blur'
    }
    ,items:[
	this.avKeyField
	,this.addrKeyField
	,this.nameField
	,this.addressCodeField]        		
});	

/*
Second code snippet is not working as accepted. 

But when I click on the text field and leave it blank the border of the text field becomes red, 
and when I hover over the text field an error message will pop out.	*/

 this.descriptionField = new Ext.form.TextField({
	fieldLabel: getMsg('testXml', 'description'),
	allowBlank: false,
	cls: 'c-form-field-required',
	name: 'description',
	blankText: testQR.getMsg('testXml', 'description.required'),
	maxLength: 50,
	id:"DescriptionDetails"
    });

this.testFormPanel = new Ext.form.FormPanel({
                id: 'testItemPanels',
                trackResetOnLoad: true
                ,cls: 'testQR-form-panel'
                ,autoScroll: true
                ,defaults: {
                     msgTarget: 'under'
                     ,emptyClass: 'c-form-empty-field'
                     ,invalidClass: 'c-form-invalid'
                     ,validateOnBlur: true
                     ,validationEvent: 'blur'
                },
	border: false
		    ,autoHeight: true
		    ,bodyStyle: 'padding:1px 1px 1px 1px'
		    ,layout:'table'
		    ,layoutConfig:{
			columns: 3
		    }
		    ,defaults: {
			labelSeparator: '',
			//margins:'0 0 0 5',
			style: 'marginRight: 5px;',
			labelAlign: 'top',
			layout:'form',
			border: false,
			bodyStyle:'background:transparent'
		    },

	items:
	    [{
		items:[this.nameField]
		},
		{
		    items:[this.descriptionField]
		}                                
	    ]
            });
		

Answer 1

申请

validateOnChange:false and allowBlank:false

在所需的每个字段中，然后执行

form.isValid()

在保存按钮单击处理程序上。它会工作。如果它没有请提供一个小提琴重新创建问题。