Setting Focus on form mandatory field after Save

Jul 13, 2012 at 11:10 AM

I have a user form that must be as 'slick' as possible for naive users. The combination of css and javascript helpers is working well. However I need to set  user focus to the first mandatory field that failed validation following an attempted save. I am having difficulty following the javascript execution following Save so as to pinpoint where/how best to modify the default NO behaviour.

Can anyone help please



Jul 16, 2012 at 9:42 AM

I think you probably just want to tweak the function 'focusOnFirst' in NakedObjects-Ajax.js.

Jul 20, 2012 at 4:36 PM

Thanks for the pointer, the solution in my case has been somewhat more convoluted because I am using the autocomplete jQuery combobox. I'll post the bones of the solution here in case it helps others with similar problems.

The jQuery plugin autocomplete combobox adds extra DOM elements, the key one being an 'input' beyond the basic 'select' (the select is also hidden). The jQuery widgets can be applied using the ajaxComplete event mentioned in an earlier post.

The standard MVC3 client side jQuery Form Validate execution directs focus to the next invalid field (by default) following the Save validate cycle. With the OOTB autocomplete combobox, the focus lands on a now hidden 'select' element .

To correct this, the OOTB autocomplete combobox can be modified to move the validation attributes from the original 'select' to the replacement 'input'. The client side validation focus then lands correctly  on the 'input' element.

Calling the nakedObjects.focusOnFirst()  in NakedObjects-Ajax.js makes focus land on the first form field when the form is first loaded through ajax, but finds the, now hidden, 'select' element. A small change to the selector fixes that.