Ext JS 4 Custom Validation: vtype for validating

Ext JS 4 Custom Validation: vtype for validating

Hi, in this article I will show how you can create your custom vtypes in MVC architecture. The article has two parts, first one show bulid-in vtype and second part is about custom vtype. To demonstrate this functionality I use as always, application created here:

Creating fullscreen Ext JS 4 app with the BorderLayout

You can of course use your own components. For example, I use the user module and creation form. The form look like the following picture:

22-extjs4

The code of the form look like the following:

Ext.define('DevJS.view.users.Add', {
    extend: 'Ext.window.Window',
    alias: 'widget.usersAdd',

    height: 225,
    width: 369,
    resizable: false,
    title: 'Add user',
    modal: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    bodyPadding: 20,
                    title: '',
                    defaults: {
                        allowBlank: false,
                        allowOnlyWhitespace: false,
                        msgTarget: 'side',
                        xtype: 'textfield',
                        anchor: '100%'
                    },
                    items: [
                        {
                            fieldLabel: 'Login',
                            name: 'login',
                            minLength: 4
                        },
                        {
                            fieldLabel: 'First Name',
                            name: 'firstName'
                        },
                        {
                            fieldLabel: 'Last Name',
                            name: 'lastName'
                        },
                        {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype: 'email'
                        },
                        {
                            fieldLabel: 'PIN Number',
                            name: 'pin',
                            minLength: 4,
                            maxLength: 4,
                            vtype: 'pin'
                        },
                        {
                            xtype: 'button',
                            anchor: 0,
                            itemId: 'save',
                            text: 'Save'
                        },
                        {
                            xtype: 'button',
                            anchor: 0,
                            itemId: 'cancel',
                            text: 'Cancel'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

//defaults object in the form is very useful, you should use it to make code more flexible and as you know good practice is to write less, do more. The defaults are applied to items, not container

The example form has five fields. The first part cover email field with build-in validation and second part take care of the PIN field.

Part 1, built-in framework validation type

The Ext JS4 framework has a few vtypes in the packet. One of them is an email:

                        {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype: 'email'
                        }

Other vtypes are here:

a) alpha

b) alphanum

c) url

To set validation type you can simply add vtype variable in your field definition. In this case ‘email’ and that’s it. Wrong value will show the error message.

For example like here:

23-extjs4

Part 2, custom validation type

To show you how you can create your own vtypes I created a new validation type ‘pin’. This validation will be for all PIN number fields. For example some banks do not give out numbers where all digits are identical (such as 1111, 2222, etc.). To do this you have to apply a new function to the Ext.form.field.VTypes object.

//Ext.form.field.VTypes is a singleton object

The nice way is to create a new file called VTypes.js in the lib directory, in my case the lib directory is in the app/lib/form/field and code look like the following:

Ext.define('DevJS.lib.form.field.VTypes', {

    pin: /(?!(.)\1\1).{3}/,

    init: function () {
        var me = this;

        //pin number
        this.pinFn();
        //etc..
    },
    pinFn:function () {
        var me = this;

        Ext.apply(Ext.form.field.VTypes, {
            pin:function (val, field) {
                //check value
                return me.pin.test(val);
            },
            pinText: 'Wrong PIN number (numbers cannot be identical)'
        });
    }
});

The important thing here is to use the same namespace (please use function name) in Text variable, in this case is pinText. And your custom function result should be true (valid) or false (not valid). If you need you can initialize more vtypes in the init function.

To implement your lib file you can open DevJS.Application class (app/application.js) and add to the launch function the following line:

Ext.create('DevJS.lib.form.field.VTypes').init();

and please add to requires array the filename string:


requires: [
    'DevJS.lib.form.field.VTypes'
 ]

After that your custom vtype should be implemented and you can add to textfield your new ‘pin’ type validation.

{
    fieldLabel: 'PIN Number',
    name: 'pin',
    minLength: 4,
    maxLength: 4,
    vtype: 'pin'
}

The result look like the following picture:

24-extjs4

As you can see it’s working fine and you can reuse it in another forms of your application or copy with your lib directory and reuse in different project.

In this example we didn’t check if user put in only digits. You can of course check it in the pin method but you should use different function with digits logic.

How you can use multiple vtypes in Ext JS4?

I will show you in the one of my next posts. I will create the example with multiple validation types. Because in current moment Ext JS 4 form object is able to operate only on the one vtype. Thanks and see you soon.

Edited: Multiple validation: multi vtype for textfield in Ext JS 4

Comments:

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send