PDA

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



rkanemeier
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:



Ext.Ajax.request({
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') {
my.util.msg({
title: 'Saved',
msg: data.MSG,
el: myGrid.el,
slideFrom: 'r'
});
// hide form window and reload grid
myWindow.hide();
myDataStore.loadPage(1);
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.

rkanemeier
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.

slemmon
17 Jul 2013, 9:57 AM
Have you seen this example that demonstrates remote validation?
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/form/xml-form.html

rkanemeier
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?

slemmon
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'
}]
});