CODEWITHSUNDEEP
validationextjstextfield
Sandy.Arv
Sandy.Arv

Reputation: 605

Validating an email textfield using a button extjs

I have a textfield which takes email as its value by using 

vtype : 'email'

I am trying to validate this textfield using a button, wherein, when clicked, it should alert me if the textfield has email input or not. Based on my code, the validation always gives me false no matter the input. how should I do this? Here is my code:

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        id: 'emailField',
        fieldLabel: 'EmailAddress',
        vtype: 'email',
        allowBlank: false,
        validator: function (val) {
            var fieldValidation = Ext.form.field.VTypes.email(val);
            if (fieldValidation === true) {
                this.setFieldStyle("background-color : #BCF5A9");
            } else {
                this.setFieldStyle("background-color : #F6CECE");
            }
        },

    }, {
        xtype: 'button',
        text: 'select',
        handler: function () {
            alert(Ext.getCmp('emailField').isValid());
        }
    }]
});

P.S: I understand that the problem is with the validator: function (val) I have used in the textfield. But I need it to change the color of the textfield based on the input. Is there any other way of doing this?

EDIT:

I got it working by changing the validator : function to a change : function

listeners: {
        'change': function (thisField) {

            if (thisField.isValid()) {
                this.setFieldStyle("background-color : #BCF5A9");
            } else {
                this.setFieldStyle("background-color : #F6CECE");
            }
        }
    }

Upvotes: 0

Views: 1252

Answers (2)

Sandy.Arv
Sandy.Arv

Reputation: 605

I got it working by changing the validator : function to a change : function

listeners: {
        'change': function (thisField) {

            if (thisField.isValid()) {
                this.setFieldStyle("background-color : #BCF5A9");
            } else {
                this.setFieldStyle("background-color : #F6CECE");
            }
        }
    }

Upvotes: 1

bullettrain
bullettrain

Reputation: 966

Upon further investigation, your custom validator is messing up validation coming with default vtype:'email'. Remove the validator function and validation will work correctly.

If you just want to change the color of the textfield based on the validated input, all you need to do is override the css class (.x-form-invalid-field-default) which is added every time the textfield is invalid.

Hope it helps.

Upvotes: 1

Related Questions