PDA

View Full Version : Best practice for form validation



israelidanny
15 Oct 2010, 9:04 PM
Is there any existing automation for displaying validation?
What would be the best way to notify the user of what fields exactly need editing in the form in order to fix it?

jwall
15 Oct 2010, 9:19 PM
I'm interested in this as well. Could we please have some demo code which shows how we should notify users of invalid form fields, possibly tied in with the new Model validation found in the .97b release.

Thanks

israelidanny
17 Oct 2010, 4:07 PM
Any thoughts anyone? This seems like a pretty major issue for developing apps.

I have a few of my own thoughts on the subject, but I wanted to hear the more official best practice from the devs.

profunctional
26 Oct 2010, 8:32 AM
bump.

thomyorke
4 Jan 2011, 4:12 PM
Bueller?

tomalex0
5 Jan 2011, 6:56 AM
Best practice is to use Model, it does have a validation feature, also we can write custom validation methods

Here is a small workaround. Hope it helps



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

var form;

Ext.apply(Ext.data.validations,{
passwordMessage: 'Password Entered is wrong',
password: function(config, value) {
if(value == "test"){
return true;
} else {
return false;
}
}
});

Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'password', type: 'password'},
{name: 'email', type: 'string'}
],
validations: [
{type: 'presence', name: 'name',message:"Enter Name"},
{type: 'presence', name: 'password', message : "Enter Password"},
{type: 'format', name: 'email', matcher: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:"Wrong Email Format"},
{type : 'password', name:'password'}
]
});

var formBase = {
scroll: 'vertical',
url : 'postUser.php',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com',
useClearIcon: true
}]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Load Model',
ui: 'round',
handler: function() {
formBase.user = Ext.ModelMgr.create({
'name' : 'Akura',
'password': 'secret',
'email' : 'saru@sencha.com'
}, 'User');

form.loadModel(formBase.user);
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Save',
ui: 'confirm',
handler: function() {
var model = Ext.ModelMgr.create(form.getValues(),'User');

var errors = model.validate(),message = "";
if(errors.isValid()){

if(formBase.user){
form.updateRecord(formBase.user, true);
}
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});

} else {
Ext.each(errors.items,function(rec,i){
message += rec.message+"<br>";
});
Ext.Msg.alert("Validate", message, function(){});
return false;
}
}
}
]
}
]
};

if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 480
});
}

form = new Ext.form.FormPanel(formBase);
form.show();
}
});

bobvandell
24 Mar 2011, 9:08 AM
Thanks tomalex0 for this simple and elegant solution. I'm creating my form based upon a json_object I generated server side and just parsing the 'required' attribute for each field item allows me to determine whether or not to add a validation for that object (like a required text field).

mrwebslinger
7 Jul 2011, 7:59 AM
How would I validate one field against another using that method? Example, Password vs Password2.

epiphanydigital
12 Aug 2011, 8:44 AM
Same question as above.

tomalex0
12 Aug 2011, 8:50 PM
I have a look into possibility of validating a field value with other in same form. I had to make a small change in Model.


Ext.override(Ext.data.Model,{
validate: function() {
var errors = new Ext.data.Errors(),
validations = this.validations,
validators = Ext.data.validations,
length, validation, field, valid, type, i;


if (validations) {
length = validations.length;

for (i = 0; i < length; i++) {
validation = validations[i];
field = validation.field || validation.name;
type = validation.type;
valid = validators[type](validation, this.get(field),this);

if (!valid) {
errors.add({
field : field,
message: validation.message || validators[type + 'Message']
});
}
}
}

return errors;
}
});


Then try


Ext.apply(Ext.data.validations,{
passwordMessage: 'Password Entered is wrong',
password: function(config, value,formData) {
console.log(config);
console.log(value);
console.log(formData.data);
if(value == "test"){
return true;
} else {
return false;
}
}
});


formData will have all values corresponding of form. Use and create your own validations :).
Hope this helps

wenqz80
8 Oct 2011, 10:06 PM
Great thanks, the model make my life easier. However, what will be the validation type that used to check the value of a Checkboxfield? For example, a checkbox for user to agree to term and con during registration.

Can you please advise

epiphanydigital
9 Oct 2011, 8:26 AM
wenqz80 (http://www.sencha.com/forum/member.php?318082-wenqz80), I think what you're looking for is "checked".

If you have "value" set to true and "checked" is checked by the user, the return value is true for "checked".

If you have "value" set to false and "checked" is checked by the user, the return value is false for "checked".

To me, since it's all boolean anyway, I would have preferred to have seen on one option, that being "value".

Does that help?