View Full Version : markInvalid() field styling not working IE 9

15 Jul 2013, 11:36 AM
I'm performing server-side validation on a set of fields in a form. When I click the "Save" button, I execute an ajax request to perform the validation/update. My backend program will send back a false if the update was unsuccessful along with the field name of the field in error. Here is some sample code on how I am handling the response if the field is in error:

url: 'vvcall.pgm',
params: {
pgm: 'myprogram',
action: 'saveRecord',
inReasonCode: myFormPanel.down('#inputReasonCode').getValue(),
inReasonDesc: myFormPanel.down('#inputReasonCodeDesc').getValue(),
inReasonStatus: myFormPanel.getForm().getValues().status,
inMode: inMode
success: function(response) {
var data = Ext.decode(response.responseText);
if (data.SUCCESS == '1') {
title: 'Saved',
msg: data.MSG,
el: myGrid.el,
slideFrom: 'r'
// hide form window and reload grid
currentRecord = [];
} else {
console.log('the bad field = '+data.FLD);
try {
if (data.FLD !== ' ') {
myFormPanel.down('#' + data.FLD).markInvalid(data.MSG);
} catch(e){
Ext.Msg.alert('Ajax Response Unmonitored','An unmonitored error occured when attempting to save record');
failure: function() {
Ext.Msg.alert('Ajax Failure', 'Received a failure response from the server when attempting to save record.');

In Chrome, the desired field will be outlined in red, and when you hover your mouse over the field, the error tool tip will pop up. In IE 9, this does not happen but the console is still showing the correct error/field. If there is a solution that does not include adding validation types, that would be preferable.

15 Jul 2013, 2:27 PM
More weirdness. When I pull up IE console, markinvalid applies the "red outline" style. However, if I don't ever bring up the console, it never works.

17 Jul 2013, 9:57 AM
Have you seen this example that demonstrates remote validation?

23 Jul 2013, 10:39 AM
thanks for the link. i have some curiosities:

1. is this a suggestion that markInvalid() does not work in ie with ExtJS 4.0.7?
2. will this type of form validation work with ExtJS 4.0.7?
3. is there a way to do this without the example you listed?

26 Jul 2013, 12:19 PM
I would think your example would work. The following test case worked ok for me to indicate the field as invalid including the tooltip invalid message when tested on IE9 with 4.0.7:

var form = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
tbar: [{
text: 'Mark Name invalid',
handler: function () {
form.down('textfield').markInvalid('the server says this field is invalid');
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'