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 — 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.
Nice information, I really appreciate the way you presented.Thanks for sharing..
Thanks very much !
[...] Unique Field Form Validation Using PHP and EXTJS » Superdit.com [...]
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
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.
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
Thanks
when
field.markInvalid(‘Username Already In Use’);
why
var aa = Ext.getCmp(‘mytest’); // id: mytest
var bool2 = aa.validate(); //true ???????
how
aa.validate()———-false;
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…
sory I don’t have the sample code
but, I think it will be the same like confirm password validataion
you can see here http://dev.sencha.com/deploy/dev/examples/form/adv-vtypes.html
and create custom validation, that check valid email and check the the confirm email
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.
P.S. using ext-js 4
check with firebug on firefox or javascript console on chrome, maybe something error with php result,
btw I haven’t extjs 4
actually,i can submit the form before response of ajax,right?
I think you can trick that when ajax start you can disable the form from submitting