CODEWITHSUNDEEP
extjsextjs4extjs4.1
Illep
Illep

Reputation: 16841

Error message not showed when textfield is empty

I have a textfield and a button, I want to popout an error message when the user clicks on the Send button if the textfield is left blank or empty. My code is as follows;

According to my code, i am able click on the Send button and submit even if the textfield value is empty. But when i click on the text field and leave it blank the border of the textfield becomes red, and when i hover over the textfield an error message will pop out.

What i want to do is to, popout an error message (If the textfield is empty) when the user clicks on the Send button.

                    {
                        xtype: 'button',
                        text: 'Send',
                        action: 'send1'

                    },

                    xtype: 'textfield',                            
                        name: 'name',
                        fieldLabel: 'Name',
                        allowBlank: false,
                        blankText: 'Name left blank'
                    },

Upvotes: 2

Views: 5141

Answers (2)

Srinivas B
Srinivas B

Reputation: 1852

                 {
                    xtype: 'button',
                    text: 'Send',
                    action: 'send1'

                },
                {
                    xtype: 'textfield',
                    id:'nameField',
                    name: 'name',
                    fieldLabel: 'Name',
                    allowBlank: false,
                    blankText: 'Name left blank'
                }

By giving the id of the textfield, u can have the below code in the handler of the button

                if(Ext.getCmp('nameField').getValue().length== 0)
                   Ext.Msg.alert('FormSubmissionError','TextField should not be empty');
                else
                   Submit the form.

Upvotes: 4

sha
sha

Reputation: 17860

If you need to present a popup message you need to do this manually in button click handler. ExtJs doesn't provide built-in capabilities for that. However you can add

formBind: true

into your button definition and ExtJs will disable button until all validators on all elements will pass.

Upvotes: 1

Related Questions