Home / Programmazione / Javascript - AJAX / Validazione form in Sencha touch
Mattepuffo

Validazione form in Sencha touch

Validazione form in Sencha touch

In un precedente articolo abbiamo visto come creare un form con Sencha touch.

Oggi vediamo come mettere in piedi un basilare sistema di validazione.

Il form ha tre campi:

  • nome
  • email
  • messaggio

Tutti e tre sono obbligatori e l'email deve essere anche formalmente corretta.

Questo il nostro form:

var formContact = new Ext.form.FormPanel({
            title: 'My Form',
            items: [{
                xtype: 'fieldset',
                itemId: 'formcontact',
                items: [{
                    xtype: 'textfield',
                    name : 'nome',
                    label: 'Nome',
                    itemId: 'nome'
                },
                {
                    xtype: 'textfield',
                    name : 'email',
                    label: 'Your email',
                    itemId: 'email'
                },
                {
                    xtype: 'textareafield',
                    name : 'message',
                    label: 'Message',
                    itemId: 'message'
                },
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    layout: {
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'button',
                        text: 'Send',
                        handler: function() {

                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Reset',
                        handler: function() {
                            formContact.reset();
                        }
                    }]
                }]
            }]
        });

Importante è il parametro itemId, che ci serverà per riconoscerlo dentro la pagina e prenderne il valore.

La validazione la mettiamo dentro ad handler: function, cioè le azioni che vengono eseguite quando clicchiamo sul bottone Send.

Vi metto il particolare seprato.

                      handler: function() {
                            var nome = formContact.getComponent('formcontact').getComponent('nome');
                            var email = formContact.getComponent('formcontact').getComponent('email');
                            var msg = formContact.getComponent('formcontact').getComponent('message');
                            var espressione = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
                            if (nome.getValue().length == 0 || email.getValue().length == 0 || msg.getValue().length == 0) {
                                Ext.Msg.alert('All fields are required');
                            } else if (!espressione.test(email.getValue())) {
                                Ext.Msg.alert('The email you entered is not valid');
                            } else {
                                formContact.submit({
                                    url: 'test.php',
                                    method: 'POST',
                                    success: function (frm, res)  {
                                        alert(res.result);
                                    },
                                    failure: function (frm, res) {
                                        alert(res.result);
                                    }
                                })
                                formContact.reset();
                            }
                        }

Le prime tre variabili corrispondono alle tre textfield.

La quarta corrisponde all'espressione regolare per controllare la forma della mail.

La funzione getComponent() prende in considerazione il parametro itemId impostato in precedenza, che ovviamente deve essere univoco (un pò come gli id nell'HTML per intenderci).

Prima controlliamo che i campi non siano vuoti.

Il secondo controllo convalida la mail.

Se tutto va bene viene fatto il submit del form (seguendo le linee guida del precedente articolo).