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;

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

…and the form code would be:

id: 'myWindowFormID',
xtype: "form",
bodyPadding: 2,
defaultType: "textfield",
frame:true,
items:
	[
		<!-- New Line -->
		{
			new Ext.form.DateField({											fieldLabel: 'Deadline',
				name: 'deadlineDate',
				id: 'deadlineDate',
				format:'d/m/Y',
				allowBlank:false,
				value : new Date(),
				width: 200
			}),
			{
				fieldLabel: '',
				disabled: false,
				editable: true, 
				allowBlank:false,
				hideTrigger:true,
				xtype: 'textfield',
				vtype: 'TimeVType',
				name:"deadlineTime",
				id: 'deadlineTime',
				value: '09:00',
				height: 25,
				width: 50
			}
		}
	],
	buttons: [
	{
	   text: 'OK',
	   handler: function() {

		// Show a waiting message box
		Ext.MessageBox.show({
			msg: 'Sending and processing the data...',
			title: 'Please wait',
			progressText: 'Sending and processing the data...',
			progress: true,
			closable: false,
	   		width:300,
	   		wait:true,
	   		waitConfig: {interval:200}
		});

		// Get the form fom the current OK button
		<!-- var form = Ext.getCmp('myWindowFormID').getForm(); -->
		var form = btn.up('form').getForm();
		form.submit({
			url: 'myController.do?action=doMyBusiness',
		    	method: 'POST',
		    	waitTitle: 'Please wait',
			waitMsg: 'Sending and processing the data...',

			success: function(form, action) {
				// Hide the waiting message box
				Ext.MessageBox.hide();
									
				//var result = Ext.JSON.decode(response.responseText);
				var result = action.result;

				if (result.success && result.success === 'true') {
					var prepareFileName = result.data;
					Ext.MessageBox.alert('alert','done!!!');
				} else {
					if(result.errorMessage === ''){
						Ext.MessageBox.alert('alert','error on server!');
					}else{
						Ext.MessageBox.alert('alert',result.errorMessage;
					}
				}
			}							
			,failure: function(form, action) {
				// Hide the waiting message box
				Ext.MessageBox.hide();

				Ext.MessageBox.alert('alert', 'the form is invalid!!!');
			}

		}); // end-of-submit
	   }
	}

….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:

var form = Ext.getCmp('myWindowFormID').getForm();
if(form.isValid()==false){
	Ext.MessageBox.alert('alert', 'the form is invalid!!!');
}else{
	form.submit({
		....
	});
}

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