1. #1
    Ext User israelidanny's Avatar
    Join Date
    Mar 2009
    Posts
    15
    Vote Rating
    0
    israelidanny is on a distinguished road

      0  

    Default Best practice for form validation

    Best practice for form validation


    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?

  2. #2
    Ext User
    Join Date
    Oct 2010
    Posts
    9
    Vote Rating
    0
    jwall is on a distinguished road

      0  

    Default


    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

  3. #3
    Ext User israelidanny's Avatar
    Join Date
    Mar 2009
    Posts
    15
    Vote Rating
    0
    israelidanny is on a distinguished road

      0  

    Default


    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.

  4. #4
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
    profunctional is on a distinguished road

      0  

    Default


    bump.

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    14
    Vote Rating
    0
    thomyorke is on a distinguished road

      0  

    Default


    Bueller?

  6. #6
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    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

    Code:
    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._-]+@[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: 'you@sencha.com',
                            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'   : 'saru@sencha.com'
                                    }, '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();
        }
    });

  7. #7
    Sencha User
    Join Date
    Sep 2007
    Posts
    23
    Vote Rating
    0
    bobvandell is on a distinguished road

      0  

    Thumbs up Thank you!

    Thank you!


    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).

  8. #8
    Sencha User
    Join Date
    Apr 2011
    Posts
    1
    Vote Rating
    0
    mrwebslinger is on a distinguished road

      0  

    Question


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

  9. #9
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100
    Vote Rating
    5
    epiphanydigital is on a distinguished road

      0  

    Default


    Same question as above.
    twitter.com/epiphanydigital #sencha #drupal #jquery #craftbeer #guitar #photography

  10. #10
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    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.
    Code:
    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

    Code:
    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

Similar Threads

  1. Best practice: 1 form with dynamic content or submit 2 forms at once?
    By gossi74 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 30 Nov 2011, 5:58 PM
  2. Form validation with form made up of multiple dynamically added tabs
    By Mat Malone in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 29 Aug 2008, 7:57 AM
  3. Server-side form-validation: How to load errors into a form?
    By wuschba in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Jun 2008, 8:05 AM

Thread Participants: 8

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar