Browse files

Test model validity, and show error messages for each form field.

  • Loading branch information...
1 parent a4cca58 commit 3f94905394cc4ae63a4ac1db739830bdc1691858 @nelstrom nelstrom committed Jul 5, 2011
View
9 public/app/controllers/Users.js
@@ -27,8 +27,13 @@ Ext.regController('Users', {
save: function(params) {
params.record.set(params.data);
- this.store.create(params.data);
- this.showList();
+ errors = params.record.validate()
+ if (errors.isValid()) {
+ this.store.create(params.data);
+ this.showList();
+ } else {
+ params.form.showErrors(errors);
+ }
}
});
View
26 public/app/views/ErrorField.js
@@ -0,0 +1,26 @@
+App.views.ErrorField = Ext.extend(Ext.Component, {
+
+ // privat
+ initComponent: function() {
+ config = {
+ xtype: 'component',
+ id: this.fieldname + 'ErrorField',
+ cls: 'errorfield',
+ tpl: [
+ '<tpl if="values.length &gt; 0">',
+ ' <ul>',
+ ' <tpl for=".">',
+ ' <li>{field} {message}</li>',
+ ' </tpl>',
+ ' </ul>',
+ '</tpl>'
+ ],
+ hidden: true
+ };
+
+ Ext.apply(this, config);
+ App.views.ErrorField.superclass.initComponent.call(this);
+ },
+
+});
+Ext.reg('App.views.ErrorField', App.views.ErrorField);
View
56 public/app/views/users/form.js
@@ -1,4 +1,6 @@
App.views.UsersForm = Ext.extend(Ext.form.FormPanel, {
+ defaultInstructions: 'Please enter the information above.',
+
initComponent: function(){
var titlebar, cancelButton, buttonbar, saveButton, fields;
@@ -31,7 +33,7 @@ App.views.UsersForm = Ext.extend(Ext.form.FormPanel, {
xtype: 'fieldset',
id: 'userFormFieldset',
title: 'User details',
- instructions: 'Please enter the information above.',
+ instructions: this.defaultInstructions,
defaults: {
required: false,
labelAlign: 'left',
@@ -46,16 +48,29 @@ App.views.UsersForm = Ext.extend(Ext.form.FormPanel, {
label: 'name',
},
{
+ xtype: 'App.views.ErrorField',
+ fieldname: 'name',
+ },
+ {
name: 'email',
label: 'email',
- }
+ },
+ {
+ xtype: 'App.views.ErrorField',
+ fieldname: 'email',
+ },
]
};
Ext.apply(this, {
scroll: 'vertical',
dockedItems: [ titlebar, buttonbar ],
- items: [ fields ]
+ items: [ fields ],
+ listeners: {
+ deactivate: function() {
+ this.resetForm();
+ }
+ }
});
App.views.UsersForm.superclass.initComponent.call(this);
@@ -73,10 +88,41 @@ App.views.UsersForm = Ext.extend(Ext.form.FormPanel, {
controller: 'Users',
action: 'save',
data : this.getValues(),
- record : this.getRecord()
+ record : this.getRecord(),
+ form : this
});
- }
+ },
+
+ showErrors: function(errors) {
+ var fieldset = this.down('#userFormFieldset');
+ this.fields.each(function(field) {
+ var fieldErrors = errors.getByField(field.name),
+ errorField = this.resetField(field);
+
+ if (fieldErrors.length > 0) {
+ field.addCls('invalid-field');
+ errorField.update(fieldErrors);
+ errorField.show();
+ }
+ }, this);
+ fieldset.setInstructions("Please ammend the flagged fields");
+ },
+
+ resetForm: function() {
+ var fieldset = this.down('#userFormFieldset');
+ this.fields.each(function(field) {
+ this.resetField(field);
+ }, this);
+ fieldset.setInstructions(this.defaultInstructions);
+ this.reset();
+ },
+ resetField: function(field) {
+ var errorField = this.down('#'+field.name+'ErrorField');
+ errorField.hide();
+ field.removeCls('invalid-field');
+ return errorField;
+ }
});
Ext.reg('App.views.UsersForm', App.views.UsersForm);
View
1 public/index.html
@@ -13,6 +13,7 @@
<!--stores-->
<script src="app/stores/Users.js" type="text/javascript"></script>
<!--views-->
+ <script src="app/views/ErrorField.js" type="text/javascript"></script>
<script src="app/views/users/List.js" type="text/javascript"></script>
<script src="app/views/users/Form.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>
View
8 public/stylesheets/styles.css
@@ -1,4 +1,4 @@
-.metadata {
- font-size: 80%;
- color: #999;
-}
+.invalid-field .x-form-label { color: red; }
+
+.errorfield { font-size: 0.75em; }
+.errorfield ul { margin: 10px; }

0 comments on commit 3f94905

Please sign in to comment.