In this post I try to share my code about form validation in EXTJS, so why another EXTJS form validation tutorial? well, the EXTJS default form validation is quite great, but most sample that I’ve found it just using client side validation and the only server side validation is when the user press submit button. So in this post the I modified a bit code about custom form validation in EXTJS, and here I’m not using database. The expected result should be like this

Let’s start :

1. Include EXTJS file in html header

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

2. Create The EXTJS form

<script type="text/javascript">
Ext.onReady(function(){
	var formRegister = new Ext.FormPanel({
		frame: false, border: false, buttonAlign: 'center',
		url: 'undefined', method: 'POST', id: 'frmRegister',
		bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
		width: 300, labelWidth: 150,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Username',
			name: 'username',
			id: 'regUsername',
			allowBlank: false,
			vtype: 'uniqueusername'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Password',
			name: 'password',
			allowBlank: false,
			inputType: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Confirm Password',
			name: 'cpassword',
			allowBlank: false,
			inputType: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Email',
			name: 'email',
			vtype:'email',
			allowBlank: false
		}
		],
		buttons: [
			{ text: 'Register' },
			{ text: 'Reset', handler: function() {
					formRegister.getForm().reset();
				}
			}
		]
	});

	var winRegister = new Ext.Window({
		title: 'CI_EXTJS &mdash; User Register',
		layout: 'fit',
		width: 350,
		height: 190,
		y: 260,
		resizable: false,
		closable: false,
		items: [formRegister]
	});

	winRegister.show();
});
</script>

3. Code for modified custom validation
The idea is overiding the custom validation everytime it called

<script type="text/javascript">
Ext.apply(Ext.form.VTypes, {
	uniqueusername : function(val, field) {
		var username = Ext.getCmp('regUsername').getValue();
		Ext.Ajax.request({
			url: 'check_username.php',
			method: 'POST',
			params: 'username=' + username,
			success: function(o) {
				if (o.responseText == 0) {
					setusernamevalidfalse();
				}
			}
		});
		return true;
	},

	uniqueusernameText : 'Username Already In Use'
});

function setusernamevalidfalse() {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val, field) {
			var username = Ext.getCmp('regUsername').getValue();
			Ext.Ajax.request({
				url: 'check_username.php',
				method: 'POST',
				params: 'username=' + username,
				success: function(o) {
					if (o.responseText == 0) {
						setusernamevalidfalse();
					} else {
						setusernamevalidtrue();
					}
				}
			});
			return false;
		}
	});
}

function setusernamevalidtrue() {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val, field) {
			var username = Ext.getCmp('regUsername').getValue();
			Ext.Ajax.request({
				url: 'check_username.php',
				method: 'POST',
				params: 'username=' + username,
				success: function(o) {
					if (o.responseText == 0) {
						setusernamevalidfalse();
					} else {
						setusernamevalidtrue();
					}
				}
			});
			return true;
		}
	});
}
</script>

4. The simple php file validation
For more advanced usage you can use some database connection, and I call it check_username.php

<?php

$username_list = array('admin', 'administrator', 'superadmin', 'john', 'michael');
if (in_array($_POST['username'], $username_list)) {
	echo 0;
} else {
	echo 1;
}

?>

You can download all files following the download link below, but i’m included EXTJS file you can download from the official site here.

DOWNLOAD SOURCE

This entry was posted on Friday, May 7th, 2010 at 5:10 pm and is filed under Extjs, Javascript, PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.