View Full Version : Can allowBlank be set to not give error styling but still disable submit button?

24 Feb 2014, 9:09 AM
For allowBlank our UI designers have asked that we not show an error or the red error styling that we show for other types of error. They just want the form invalidated so the submit button is disabled.

We have an enormous number of forms. Is there any global way to do this without having to write custom JavaScript for each form?


24 Feb 2014, 11:00 PM

I think quick fix will be from CSS..

.x-form-invalid-field {
background: none !important;
border-color: #b5b8c8 !important; /* Theme default color */

Also check: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Text-cfg-invalidCls

Md Naveed

25 Feb 2014, 8:56 AM
The problem with the above solution is that it would affect all the vTypes for validation. I don't want to lose the error condition styling for everything.


25 Feb 2014, 10:30 PM
If you still want the field (and thus the form) to be considered invalid if it is empty, then you should be able to create a CSS class to override the invalid styling and use that CSS class on only the field in question.

If you're actually trying to treat the field as valid if it is empty, then the answer is no. Either a field is valid or it isn't. And if the button is bound to the validity of the form, then an invalid field means a disabled button.

All that said, I'd probably ask why you'd want to do this. If users find the error styling annoying, imagine how annoyed they'll be when they can't submit a form that has no errors shown.

26 Feb 2014, 5:24 PM
So you're suggesting a CSS style for just this specific error? I don't want to change the styling for all errors.

I can't answer why they are asking for this. Basically its a bunch of PhD's who spend all day talking Usability and Human/Computer interaction that dictate this stuff to us.


27 Feb 2014, 3:52 AM
you can apply your own CSS only to one field if you like as follows:

Add this to your CSS file

.field1 .x-form-invalid-field {
background: none !important;
border-color: green !important; /* Theme default color */

then assign cls: 'field1' to the textfield to which you want to have it applied. this will make the color for only that one field green when its invalid and for others, it will remain the default red. If you want to apply it to all fields for one form, you can use the defaults config to set the cls.

27 Feb 2014, 6:41 AM
Yes, just create a class that overrides the error styling and use that on the one field you don't want to have error styling on.