Results 1 to 5 of 5

Thread: Validate multiple checkboxes ?

  1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    57

    Default Validate multiple checkboxes ?

    Hi

    I have a form with multiple checkboxes were I need to ensure that at least one is selected when the form is submitted.

    I know that i need a model to validate a field (which is a bit anoying) but I cant seem to wrap my head around this problem. There doesn't seem to be a way to write a custom validator that can do this and I cant find a event to tap into that would help me validate the form.

    Did I miss something?... or do you have an idea on how to solve this?

  2. #2
    Sencha User
    Join Date
    Jul 2008
    Posts
    57

    Default

    Bump. Should I assume that I have reached a limitation in the system?

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    315

    Default

    Hi, this is a form which check that at last 1 of the 3 checkbox is checked.

    Code:
            var formM4 = new Ext.form.FormPanel ({
                //scroll: 'vertical',
                url   : server + 'php/sms_send.php',
                standardSubmit : false,
    	    method: 'POST',
                items: [
                    {
                        xtype: 'fieldset',
                        itemId: 'fm4',
                        title: 'SMS:',
                        instructions: '',
                        defaults: {
                            //required: true,
                            labelAlign: 'left'
                        },
                        items: [
                        {
                            xtype: 'hiddenfield',
                            name : 'username',
                            itemId: 'username',
                        },{
                            xtype: 'checkboxfield',
                            itemId: 'ck1',
                            name : 'c1',
                            label: 'c1',
                            value: '*',
                            checked: true,
                            labelWidth: '50%',
                            listeners: {
                                keyup: function(fld, e){
                                    if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                                        e.stopEvent();
                                        fld.fieldEl.dom.blur();
    			            window.scrollTo(0,0);
    
                                        var sub = 0;
                                        if (formM4.getComponent('fm4').getComponent('ck1').isChecked() == false && formM4.getComponent('fm4').getComponent('ck2').isChecked() == false && formM4.getComponent('fm4').getComponent('ck3').isChecked() == false && sub == 0) {
                                           Ext.Msg.alert('Errore', 'Selezionare almeno un numero di telefono...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (formM4.getValues().testo == "" && sub == 0) {
                                           Ext.Msg.alert('Errore', 'SMS obbligatorio...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (sub == 0) {
                                          if(formM4.getComponent('fm4').getComponent('ck1').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck1').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck2').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck2').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck3').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck3').setValue('*');
                                          }
                                          formM4.submit({
                                            waitMsg : {message:'Invio', cls : 'loading'}
                                          });
                                        }
                                    }
                                }
                            }
                        },{
                            xtype: 'checkboxfield',
                            itemId: 'ck2',
                            name : 'c2',
                            label: 'c2',
                            value: '^',
                            hidden: true,
                            labelWidth: '50%',
                            listeners: {
                                keyup: function(fld, e){
                                    if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                                        e.stopEvent();
                                        fld.fieldEl.dom.blur();
    			            window.scrollTo(0,0);
    
                                        var sub = 0;
                                        if (formM4.getComponent('fm4').getComponent('ck1').isChecked() == false && formM4.getComponent('fm4').getComponent('ck2').isChecked() == false && formM4.getComponent('fm4').getComponent('ck3').isChecked() == false && sub == 0) {
                                           Ext.Msg.alert('Errore', 'Selezionare almeno un numero di telefono...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (formM4.getValues().testo == "" && sub == 0) {
                                           Ext.Msg.alert('Errore', 'SMS obbligatorio...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (sub == 0) {
                                          if(formM4.getComponent('fm4').getComponent('ck1').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck1').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck2').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck2').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck3').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck3').setValue('*');
                                          }
                                          formM4.submit({
                                            waitMsg : {message:'Invio', cls : 'loading'}
                                          });
                                        }
                                    }
                                }
                            }
                        },{
                            xtype: 'checkboxfield',
                            itemId: 'ck3',
                            name : 'c3',
                            label: 'c3',
                            value: '*',
                            hidden: true,
                            labelWidth: '50%',
                            listeners: {
                                keyup: function(fld, e){
                                    if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                                        e.stopEvent();
                                        fld.fieldEl.dom.blur();
    			            window.scrollTo(0,0);
    
                                        var sub = 0;
                                        if (formM4.getComponent('fm4').getComponent('ck1').isChecked() == false && formM4.getComponent('fm4').getComponent('ck2').isChecked() == false && formM4.getComponent('fm4').getComponent('ck3').isChecked() == false && sub == 0) {
                                           Ext.Msg.alert('Errore', 'Selezionare almeno un numero di telefono...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (formM4.getValues().testo == "" && sub == 0) {
                                           Ext.Msg.alert('Errore', 'SMS obbligatorio...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (sub == 0) {
                                          if(formM4.getComponent('fm4').getComponent('ck1').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck1').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck2').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck2').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck3').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck3').setValue('*');
                                          }
                                          formM4.submit({
                                            waitMsg : {message:'Invio', cls : 'loading'}
                                          });
                                        }
                                    }
                                }
                            }
                        },{
                            xtype: 'textareafield',
                            name : 'testo',
                            itemId: 'testo',
                            autoCapitalize : false,
                            placeHolder: 'Inserire SMS',
                            labelWidth: '40%',
                            useClearIcon: true,
                            maxLength: 2000,
                            maxRows: 5,
                            listeners: {
                                keyup: function(fld, e){
                                    if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                                        e.stopEvent();
                                        fld.fieldEl.dom.blur();
    			            window.scrollTo(0,0);
    
                                        var sub = 0;
                                        if (formM4.getComponent('fm4').getComponent('ck1').isChecked() == false && formM4.getComponent('fm4').getComponent('ck2').isChecked() == false && formM4.getComponent('fm4').getComponent('ck3').isChecked() == false && sub == 0) {
                                           Ext.Msg.alert('Errore', 'Selezionare almeno un numero di telefono...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (formM4.getValues().testo == "" && sub == 0) {
                                           Ext.Msg.alert('Errore', 'SMS obbligatorio...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (sub == 0) {
                                          if(formM4.getComponent('fm4').getComponent('ck1').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck1').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck2').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck2').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck3').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck3').setValue('*');
                                          }
                                          formM4.submit({
                                            waitMsg : {message:'Invio', cls : 'loading'}
                                          });
                                        }
                                    }
                                }
                         }
                        }]
                    }
                ],
                listeners : {
                    submit : function(form, result){
                        console.log('success', Ext.toArray(arguments));
                        Ext.Msg.alert('CitySafe', 'SMS inviato/i...', fback1);
                        
                    },
                    exception : function(form, result){
                        console.log('failure', Ext.toArray(arguments));
                        Ext.Msg.alert('Errore', 'Si  verificato un errore, SMS non inviato/i...', Ext.emptyFn);
    
                    },
                    beforeshow: function() {
    
                    },
                },
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        ui: 'light',
                        dock: 'bottom',
                        layout: {
                                  pack: 'center',
                        },
                        items: [{xtype: 'button',
                                 text: 'Invia',
                                 ui: 'confirm',
                                 handler: function() {
                                        var sub = 0;
                                        if (formM4.getComponent('fm4').getComponent('ck1').isChecked() == false && formM4.getComponent('fm4').getComponent('ck2').isChecked() == false && formM4.getComponent('fm4').getComponent('ck3').isChecked() == false && sub == 0) {
                                           Ext.Msg.alert('Errore', 'Selezionare almeno un numero di telefono...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (formM4.getValues().testo == "" && sub == 0) {
                                           Ext.Msg.alert('Errore', 'SMS obbligatorio...', Ext.emptyFn);
                                           sub = 1;
                                        }
                                        if (sub == 0) {
                                          if(formM4.getComponent('fm4').getComponent('ck1').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck1').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck2').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck2').setValue('*');
                                          }
                                          if(formM4.getComponent('fm4').getComponent('ck3').isChecked() == false) {
                                            formM4.getComponent('fm4').getComponent('ck3').setValue('*');
                                          }
                                          formM4.submit({
                                            waitMsg : {message:'Invio', cls : 'loading'}
                                          });
                                        }
                                }
                            }
                        ]
                    }
                ]
            });

  4. #4

    Exclamation My problem didnt solved

    I tried ur code but didnt solved it.

    My code is:

    var changePayment = function(oid) {

    if (!Ext.is.Phone) { //Nivedita Jain
    var oID=oid;

    var Payment = new Ext.form.FormPanel({
    floating: true,

    url: server_path + '?action=paymentchange&oID='+oid,
    scroll: 'vertical',
    width: 440,
    height: 400,
    standardSubmit: false,
    centered: true,
    id:'changePayment',
    autoRender: true,
    modal: false,
    hideOnMaskTap: false,
    layout: 'fit',

    dockedItems: [
    { xtype: 'toolbar', title: 'Payment' },
    { items: [
    {xtype: 'spacer' },
    {xtype: 'radiofield',name: 'paid', id:'delivered',label: 'Delivered', checked:true,value:0},
    {xtype: 'spacer' },
    {xtype: 'radiofield',name: 'paid', id:'pay',label: 'Paid',value:1},
    {xtype: 'spacer' },
    {xtype: 'radiofield',name: 'paid', id:'notPay', label: 'Not Paid',value:2},
    {xtype: 'spacer' }
    ]
    },

    { xtype: 'toolbar', docked:'bottom',items:[
    {text: 'Save',name:'save',handler: function() {
    // alert("hello");
    var updatePaymentStatus;
    if(Payment.getComponent('delivered').isChecked()==true)
    updatePaymentStatus=0;
    if(Payment.getComponent('pay').isChecked()==true)
    updatePaymentStatus=1;
    if(Payment.getComponent('delivered').isChecked()==true)
    updatePaymentStatus=2;


    alert(updatePaymentStatus+" value");
    Ext.Ajax.request({
    url: server_path + '?action=updatePayment',
    method: 'POST',
    params: {
    payment:updatePaymentStatus,
    order:oID
    },
    success: function (res, req) {
    Ext.Msg.alert("Mpole", "Payment Updated");
    },
    failure: function (res, req) {
    Ext.Msg.alert("Mpole", "Some Problem has Occured");
    }
    });
    Payment.hide();
    }},

    {text: 'Cancel',name:'cancel',handler: function() {
    Payment.reset();
    Payment.hide();
    }
    }
    ]
    }

    ],cls: 'modelWindow',
    store: paymentchangeStore
    })
    //alert(oid);
    paymentchangeStore.load({params: {oID: oid}});
    Payment.show();
    }
    }

    It say that isChecked() is not a valid function.
    What should i do??

  5. #5

    Exclamation My problem didnt solved

    I tried ur code but didnt solved it.

    My code is:

    var changePayment = function(oid) {

    if (!Ext.is.Phone) {
    var oID=oid;

    var Payment = new Ext.form.FormPanel({
    floating: true,

    url: server_path + '?action=paymentchange&oID='+oid,
    scroll: 'vertical',
    width: 440,
    height: 400,
    standardSubmit: false,
    centered: true,
    id:'changePayment',
    autoRender: true,
    modal: false,
    hideOnMaskTap: false,
    layout: 'fit',

    dockedItems: [
    { xtype: 'toolbar', title: 'Payment' },
    { items: [
    {xtype: 'spacer' },
    {xtype: 'radiofield',name: 'paid', id:'delivered',label: 'Delivered', checked:true,value:0},
    {xtype: 'spacer' },
    {xtype: 'radiofield',name: 'paid', id:'pay',label: 'Paid',value:1},
    {xtype: 'spacer' },
    {xtype: 'radiofield',name: 'paid', id:'notPay', label: 'Not Paid',value:2},
    {xtype: 'spacer' }
    ]
    },

    { xtype: 'toolbar', docked:'bottom',items:[
    {text: 'Save',name:'save',handler: function() {
    // alert("hello");
    var updatePaymentStatus;
    if(Payment.getComponent('delivered').isChecked()==true)
    updatePaymentStatus=0;
    if(Payment.getComponent('pay').isChecked()==true)
    updatePaymentStatus=1;
    if(Payment.getComponent('delivered').isChecked()==true)
    updatePaymentStatus=2;


    alert(updatePaymentStatus+" value");
    Ext.Ajax.request({
    url: server_path + '?action=updatePayment',
    method: 'POST',
    params: {
    payment:updatePaymentStatus,
    order:oID
    },
    success: function (res, req) {
    Ext.Msg.alert("Mpole", "Payment Updated");
    },
    failure: function (res, req) {
    Ext.Msg.alert("Mpole", "Some Problem has Occured");
    }
    });
    Payment.hide();
    }},

    {text: 'Cancel',name:'cancel',handler: function() {
    Payment.reset();
    Payment.hide();
    }
    }
    ]
    }

    ],cls: 'modelWindow',
    store: paymentchangeStore
    })
    //alert(oid);
    paymentchangeStore.load({params: {oID: oid}});
    Payment.show();
    }
    }

    It say that isChecked() is not a valid function.
    What should i do??

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •