JavaBlog.fr / Java.lu DEVELOPMENT,Sencha,WEB Sencha/ExtJs: Form Validation fields

Sencha/ExtJs: Form Validation fields

After the post Sencha/ExtJs: Validation fields on the fly with VType, I would write some words concerning the form’s validation on client side with the Sencha/ExtJs framework.

A concret example, with a form containing several fields and in our case a date field and a time field.
First, we will create a VType in order to valid the time field;

01<!-- Vtype or validator for the Time field in deadline -->
02Ext.apply(Ext.form.field.VTypes,
03{
04    TimeVType:  function(v) {
05        return /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/.test(v);
06    },
07    TimeVTypeText: 'The time must have the format HH:MM',
08    TimeVTypeMask: /[\d\:]/i
09}
10);

…and the form code would be:

01id: 'myWindowFormID',
02xtype: "form",
03bodyPadding: 2,
04defaultType: "textfield",
05frame:true,
06items:
07    [
08        <!-- New Line -->
09        {
10            new Ext.form.DateField({                                            fieldLabel: 'Deadline',
11                name: 'deadlineDate',
12                id: 'deadlineDate',
13                format:'d/m/Y',
14                allowBlank:false,
15                value : new Date(),
16                width: 200
17            }),
18            {
19                fieldLabel: '',
20                disabled: false,
21                editable: true,
22                allowBlank:false,
23                hideTrigger:true,
24                xtype: 'textfield',
25                vtype: 'TimeVType',
26                name:"deadlineTime",
27                id: 'deadlineTime',
28                value: '09:00',
29                height: 25,
30                width: 50
31            }
32        }
33    ],
34    buttons: [
35    {
36       text: 'OK',
37       handler: function() {
38 
39        // Show a waiting message box
40        Ext.MessageBox.show({
41            msg: 'Sending and processing the data...',
42            title: 'Please wait',
43            progressText: 'Sending and processing the data...',
44            progress: true,
45            closable: false,
46            width:300,
47            wait:true,
48            waitConfig: {interval:200}
49        });
50 
51        // Get the form fom the current OK button
52        <!-- var form = Ext.getCmp('myWindowFormID').getForm(); -->
53        var form = btn.up('form').getForm();
54        form.submit({
55            url: 'myController.do?action=doMyBusiness',
56                method: 'POST',
57                waitTitle: 'Please wait',
58            waitMsg: 'Sending and processing the data...',
59 
60            success: function(form, action) {
61                // Hide the waiting message box
62                Ext.MessageBox.hide();
63                                     
64                //var result = Ext.JSON.decode(response.responseText);
65                var result = action.result;
66 
67                if (result.success && result.success === 'true') {
68                    var prepareFileName = result.data;
69                    Ext.MessageBox.alert('alert','done!!!');
70                } else {
71                    if(result.errorMessage === ''){
72                        Ext.MessageBox.alert('alert','error on server!');
73                    }else{
74                        Ext.MessageBox.alert('alert',result.errorMessage;
75                    }
76                }
77            }                          
78            ,failure: function(form, action) {
79                // Hide the waiting message box
80                Ext.MessageBox.hide();
81 
82                Ext.MessageBox.alert('alert', 'the form is invalid!!!');
83            }
84 
85        }); // end-of-submit
86       }
87    }

….so if we fill a wrong values in the deadline and time fields like:

… and submit the form by clicking on a ‘OK’ button, we will obtain the following message specified in the above code:

… an other way, it is check the form fields on the fly by call the method form.isValid() like:

1var form = Ext.getCmp('myWindowFormID').getForm();
2if(form.isValid()==false){
3    Ext.MessageBox.alert('alert', 'the form is invalid!!!');
4}else{
5    form.submit({
6        ....
7    });
8}

This practise works, but in reality it’s not the best practise, so, I advise you to read the official Ext.form.action.Submit documentation.

That’s all!!!!

Best regards,

Huseyin OZVEREN

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Related Post