ExtJS 4 - How to mark form field invalid and display red borders around it (as done default by ExtJS) if custom validation fails?

Question

I have a form in which some of the fields need to be validated at the server side.

When the form is submitted, then the server validates the values of these fields and if validations fail then server returns success:false (along with name and error message of each field at which validation has failed).

Now, I need to display such fields as 'invalid' and apply the same red-border around them which is default done by ExtJS if client side validation failed.

I tried using the following:

Ext.getCmp('fieldId').markInvalid() and invalidCls:'x-form-invalid-field'

I used the above statements in the 'failure' callback function of form.submit. These statments get called but don't apply any effect on such fields.

Thus could anyone guide at the following:

How to mark a field invaild and apply the same effect (having red-borders) around it when a custom validation fails?

Thanks in advance.

Pattipattie

Answer 1

I have been able to find a solution for this.

In case of server side validation failing, following needs to be returned from the server:

success:false,
errors:{
    field1:errorMsg1,
    field2:errorMsg2
}

This will itself mark the fields as invalid and apply the red-border to the fields if there is an error associated.

Hope this helps someone looking for something similar.

Pattipattie

im trying to do the same,but i dont know how to return this to extjs..would u plz give an example.thank you – Dedie

Sure, but it would be great if you could create a new question and post your problem in greater detail there so that it can be answered. – Pattipattie

i already did and got an answer that i couldnt make work , i need simpler one as im still new to all this,ty .here is it #7916448 – Dedie

I have tried answering your question at the link posted above. Hope that helps. – Pattipattie

This works as long as you submit the form, e.g.: form.submit(). If you're using Ext.ajax, the validation will not be handled by the errorReader. – Provoke

Answer 2

Get the error message from the server

Ext.getCmp('your_form_id').getForm().findField('field_id_or_field_name').markInvalid('server_error_message');

Tatty

This will not invalidate the submit button that is bound to the form though. – Austinaustina

Great !! You made my day. I was looking for this. markInvalid() – Symmetrize

Answer 3

Instead of markInvalid function use setActiveError if you want to change error message too.

Ext.getCmp('your_component_id').setActiveError('your_custom_error_message')

Rhyton

Answer 4

Try this , it's about the server validation , you can use json or xml http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/xml-form.html

Tatty

Answer 5

Ext.getCmp('#fieldId').isValid();

Lied

Please try to avoid just dumping a code as an answer and try to explain what it does and why. Your code might not be obvious for people who do not have the relevant coding experience. – Information