PDA

View Full Version : Ajax form validation



extjser12
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() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
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!

extjser12

mitchellsimoens
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.

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


blur:function(me){
var code=me.getValue();
Ext.Ajax.request({
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){
me.focus(true);
me.reset();
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
});
}

extjser12
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!
extjser12

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

extjser12
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.

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