1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Dallas, TX
    Posts
    68
    Answers
    6
    Vote Rating
    1
    rkanemeier is on a distinguished road

      0  

    Default Unanswered: markInvalid() field styling not working IE 9

    Unanswered: markInvalid() field styling not working IE 9


    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:

    Code:
                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.

  2. #2
    Sencha User
    Join Date
    May 2010
    Location
    Dallas, TX
    Posts
    68
    Answers
    6
    Vote Rating
    1
    rkanemeier is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,417
    Answers
    435
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Have you seen this example that demonstrates remote validation?
    http://docs.sencha.com/extjs/4.2.1/e.../xml-form.html
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  4. #4
    Sencha User
    Join Date
    May 2010
    Location
    Dallas, TX
    Posts
    68
    Answers
    6
    Vote Rating
    1
    rkanemeier is on a distinguished road

      0  

    Default


    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?

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,417
    Answers
    435
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    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:

    Code:
    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'
        }]
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 1