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