View Full Version : Ajax form validation

22 Feb 2012, 11:45 AM
Can someone help me how I can implement an Ajax form validation?

The validation should be triggered when the field is left (blur event). The validation of the form should work as if you were to use the built-in validation (e.g. allowBlank: false) configurations. Accordingly, the config of "formBind" works as usual like the "allowBlank" config on a textfield.

Here is my code which I've already written:

Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
listeners: {
blur: function() {
//Code for Validation

// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
renderTo: Ext.getBody()

Thank you very much for your help!


22 Feb 2012, 12:37 PM
You can do a sync Ajax call in Ext JS 4 but that would halt the entire app while it sends off. You need to think async so in your validation you have to return false until the ajax call succeeds and then execute a method based on if the Ajax returned valid or not.

22 Feb 2012, 9:35 PM
in "code for validation" segment , write an ajax request such this :

var code=me.getValue();
url: 'final/php/user_real/national.php', // you can append your parameter to the URL
params: 'code='+code,//{or here as a parameter},
success: function(response) {
if (response.responseText==1){
Ext.MessageBox.show({ title: '????? ???????',
msg: '! ????? ???? ?? ??? ??????? ???',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.WARNING//Ext.get('icons').dom.value
},failure: function() {} // do some things on failure

24 Feb 2012, 12:00 PM
Thanks for your help. But I want to bring working the "standard validation" with Ajax.
Can somebody help me?

Thank you very much!

24 Feb 2012, 12:03 PM
what is standard validation ?

24 Feb 2012, 12:47 PM
Like the client validation. This means, that the validation behaviour is the same as when you set the "allowBlank: false" config.
In which a tooltip is displayed and the field is underlind, as the "markInvalid()" does. But this method doesn't affect the validity of the form itself, as you can read in the documentation. My question now is how can I influence the form validity. So that the method "isValid()" doesn't return always true.

25 Feb 2012, 1:50 AM
@mitchellsimoens: Can you give me a working example of your solution?