ExtJS 4 - How to mark a form field invalid and display red borders around it (as is done by default ExtJS), if the user check failed?

Question

I have a form in which some fields need to be checked on the server side.

When the form is submitted, the server checks the values ​​of these fields, and if the checks are not performed, the server returns success: false (along with the name and error message of each field in which the check failed).

Now I need to display such fields as "invalid" and apply to them the same red border that ExtJS performed by default if the client-side check failed.

I tried using the following:

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

I used the above statements in the "failure" form callback function. These statuses are called, but do not affect such fields.

Thus, one could conduct the following:

How to mark invaild field and apply the same effect (with red borders) to it in case of unsuccessful user check?

Thanks in advance.

Answer 1

I was able to find a solution for this.

If the server-side check fails, then you need to return the server:

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

This itself marks the fields as invalid and applies a red border to the fields if there is an error.

Hope this helps someone find something similar.

Answer 2

Receive error message from server

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

Answer 3

Instead of the markInvalid function, use setActiveError if you want to change the error message as well.

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

Answer 4

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

Answer 5

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