Best practice for form validation

[israelidanny]

Is there any existing automation for displaying validation?
What would be the best way to notify the user of what fields exactly need editing in the form in order to fix it?

[jwall]

I'm interested in this as well. Could we please have some demo code which shows how we should notify users of invalid form fields, possibly tied in with the new Model validation found in the .97b release.

Thanks

[israelidanny]

Any thoughts anyone? This seems like a pretty major issue for developing apps.

I have a few of my own thoughts on the subject, but I wanted to hear the more official best practice from the devs.

[profunctional]

bump.

[thomyorke]

Bueller?

[tomalex0]

Best practice is to use Model, it does have a validation feature, also we can write custom validation methods

Here is a small workaround. Hope it helps

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

        var form;
        
        Ext.apply(Ext.data.validations,{
            passwordMessage: 'Password Entered is wrong',
            password: function(config, value) {
                if(value == "test"){
                    return true;
                } else {
                    return false;
                }
            }
        });
        
        Ext.regModel('User', {
            fields: [
                {name: 'name',     type: 'string'},
                {name: 'password', type: 'password'},
                {name: 'email',    type: 'string'}
            ],
            validations: [
                {type: 'presence', name: 'name',message:"Enter Name"},
                {type: 'presence', name: 'password', message : "Enter Password"},
                {type: 'format',   name: 'email', matcher: /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:"Wrong Email Format"},
                {type : 'password', name:'password'}
            ]
        });
        
        var formBase = {
            scroll: 'vertical',
            url   : 'postUser.php',
            standardSubmit : false,
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Personal Info',
                    instructions: 'Please enter the information above.',
                    defaults: {
                        required: true,
                        labelAlign: 'left',
                        labelWidth: '40%'
                    },
                    items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        label: 'Name',
                        useClearIcon: true,
                        autoCapitalize : false
                    }, {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password',
                        useClearIcon: false
                    }, {
                        xtype: 'emailfield',
                        name : 'email',
                        label: 'Email',
                        placeHolder: '[email protected]',
                        useClearIcon: true
                    }]
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            text: 'Load Model',
                            ui: 'round',
                            handler: function() {
                                formBase.user = Ext.ModelMgr.create({
                                    'name'    : 'Akura',
                                    'password': 'secret',
                                    'email'   : '[email protected]'
                                }, 'User');
        
                                form.loadModel(formBase.user);
                            }
                        },
                        {xtype: 'spacer'},
                        {
                            text: 'Reset',
                            handler: function() {
                                form.reset();
                            }
                        },
                        {
                            text: 'Save',
                            ui: 'confirm',
                            handler: function() {
                                var model = Ext.ModelMgr.create(form.getValues(),'User');
                                
                                var errors = model.validate(),message = "";
                                if(errors.isValid()){
                                    
                                    if(formBase.user){
                                    form.updateRecord(formBase.user, true);
                                    }
                                    form.submit({
                                        waitMsg : {message:'Submitting', cls : 'demos-loading'}
                                    });
                                    
                                } else {
                                    Ext.each(errors.items,function(rec,i){
                                        message += rec.message+"<br>";
                                    });
                                    Ext.Msg.alert("Validate", message, function(){});
                                    return false;
                                }
                            }
                        }
                    ]
                }
            ]
        };
        
        if (Ext.is.Phone) {
            formBase.fullscreen = true;
        } else {
            Ext.apply(formBase, {
                autoRender: true,
                floating: true,
                modal: true,
                centered: true,
                hideOnMaskTap: false,
                height: 385,
                width: 480
            });
        }
        
        form = new Ext.form.FormPanel(formBase);
        form.show();
    }
});

[bobvandell]

Thanks tomalex0 for this simple and elegant solution. I'm creating my form based upon a json_object I generated server side and just parsing the 'required' attribute for each field item allows me to determine whether or not to add a validation for that object (like a required text field).

[mrwebslinger]

How would I validate one field against another using that method? Example, Password vs Password2.

[epiphanydigital]

Same question as above.

[tomalex0]

I have a look into possibility of validating a field value with other in same form. I had to make a small change in Model.

Ext.override(Ext.data.Model,{
     validate: function() {
        var errors      = new Ext.data.Errors(),
            validations = this.validations,
            validators  = Ext.data.validations,
            length, validation, field, valid, type, i;


        if (validations) {
            length = validations.length;
            
            for (i = 0; i < length; i++) {
                validation = validations[i];
                field = validation.field || validation.name;
                type  = validation.type;
                valid = validators[type](validation, this.get(field),this);
                
                if (!valid) {
                    errors.add({
                        field  : field,
                        message: validation.message || validators[type + 'Message']
                    });
                }
            }
        }
        
        return errors;
     }
});

Then try

Ext.apply(Ext.data.validations,{
            passwordMessage: 'Password Entered is wrong',
            password: function(config, value,formData) {
                console.log(config);
                console.log(value);
                console.log(formData.data);
                if(value == "test"){
                    return true;
                } else {
                    return false;
                }
            }
        });

formData will have all values corresponding of form. Use and create your own validations .
Hope this helps