Unique Field Form Validation Using PHP and EXTJS

May 7th, 2010 by aditia rahman / 15 Comments  

     

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

        submit to reddit Delicious

15 Comments Leave a Comment Subscribe RSS

  • Nice information, I really appreciate the way you presented.Thanks for sharing..

  • bienvn says:

    Thanks very much !

  • I am in the middle of organizing validation with Extjs and PHP and what I wonder is, how is it with the performance when checking validation (server side) with Ajax? I am still in doubt, to do it immediatelly (ajax) or to do it only when the “save” button is pressed. I would like to hear some opinion on this from others (and off course from the author himself too).

    • for the performance I think it would be better just put the validation when the save button is pressed,
      so far that i knew, field validation in extjs, it will validate when onblur and onkeypress are triggered

      the server will be busy if serving high traffic

      • Vladimir says:

        Thanks for the general idea.
        I just finished testing and confirm, page sends AJAX request every key press while you input the field value and one time when you leave the field. So if you plan to query database on the server side to validate field value it could be a serious performance problem if you are not the only user of this form.

  • vagustolga says:

    u can use

    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) {
    field.markInvalid(‘Username Already In Use’);
    }
    }
    });
    return true;
    },

    uniqueusernameText : ‘Username Already In Use’
    });

    happy coding ;)

  • Yok says:

    Good Day Sir

    How about confirmation of email like for example feild 1 email feild 2 confirm email…do you have sample code for that?

    Thanks…

  • Liviu says:

    Hi, verry interesting post but i can’t get my form to work with server side validations. I try to send back to it some json like this: { “success”: false, “errors”: {“name”: “name is too short”} } for example and i don’t see the validation errors, just the little red triangle remains on my field. Any ideea what i am missing ? I can’t find anywhere a clear example where server side validation is set up after the form is submitted.

  • radio says:

    actually,i can submit the form before response of ajax,right?

Leave a Comment