Hi All,
So I love the field validation where it highlights the field with the problem. However, if those fields are in a tab it can be hard to see where the problem is. So this technique puts a red border around the tabs that have fields with validation errors.
I'm a bit of a newb so this code might be brittle, but I've received so much help here I thought I'd share this. Seems to work. This requires jquery.
Here's the javascript function (i'm sure it could be cleaned up):
I'm calling the function from the js system events in the
AfterAjaxCallbackComplete event like this:
I'm doing that because I'm doing some custom calls to validate (in the field onBlur event). You could probably instead run it in the afterGridSubmit if e.hasErrors == true but I haven't tested it.
Any critiques or improvements are welcome.
thanks,
Brian
So I love the field validation where it highlights the field with the problem. However, if those fields are in a tab it can be hard to see where the problem is. So this technique puts a red border around the tabs that have fields with validation errors.
I'm a bit of a newb so this code might be brittle, but I've received so much help here I thought I'd share this. Seems to work. This requires jquery.
Here's the javascript function (i'm sure it could be cleaned up):
Code:
//Highlight the tab link for any tab panes that contain field validation errors //This function must be run AFTER the validation of fields has been complete to work function HighlightErrorTabs(tab_id) { var invalid_elements; var tab_pane_id; var tab_link_id; var tab_link; var tab_count //current row # var rowNum = {Grid.Object}._selectedRow; //the class for input fields with a validation error var errorClass = '{Grid.style}InputError' //get the # of tabs eval('tab_count ={Grid.ComponentName}_' + tab_id + 'R_' + rowNum + 'Obj.panes.length;'); for(var i=0; i<tab_count - 1; i++) { //get the tab pane id tab_pane_id = '{Grid.ComponentName}_' + tab_id + 'R_' + rowNum + '\\.' + i + '\\.PANE'; //select ancestors of the tab pane with the error class using jquery invalid_elements = $j('#' + tab_pane_id + ' .' + errorClass); //get the id of the tab link (what you click on to open the tab) tab_link_id = '{Grid.ComponentName}_' + tab_id + 'R_' + rowNum + '\\.' + i + '\\.TAB'; //return the jquery tab link object tab_link = $j('#' + tab_link_id); //set or clear the error style for the link to the tab pane depending on if the pane contains elements with errors if (invalid_elements.length > 0) { tab_link.css('border', '2px solid red'); } else { tab_link.css('border', ''); } } }
AfterAjaxCallbackComplete event like this:
Code:
if (e.ajaxEvent == 'validateGridDataRow' || e.ajaxEvent == 'validateGrid') { HighlightErrorTabs('TAB_1'); }
Any critiques or improvements are welcome.
thanks,
Brian