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 --> |
02 | Ext.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:
01 | id: 'myWindowFormID', |
02 | xtype: "form", |
03 | bodyPadding: 2, |
04 | defaultType: "textfield", |
05 | frame:true, |
06 | items: |
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:
1 | var form = Ext.getCmp('myWindowFormID').getForm(); |
2 | if(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