Usability - Productivity - Business - The web - Singapore & Twins

Setting focus to the first invalid field

When it comes to validation, the only secure way is server side validation (Client side validation is more: "nice suggestions for users"). One little grievance developers have - and try to fix with elaborate measures - is the requirement to set the focus on the first failed field. XPages makes this quite simple. As Tommy pointed out fields that are invalidated server side get the attribute aria-invalid="true".
Besides, as Tommy suggested, using it to style the input (check his comment - cool idea), you can use it to set the focus on the first invalid field. The key component is the dojo.query function. It allows all sorts of interesting queries, including for attributes. So add a simple Script block with this static value to your page:
XSP. addOnLoad ( function ( ) {
      var invalid = dojo. query ( "[aria-invalid=true]" ) ;
      if (invalid. length > 0 ) {
         invalid [ 0 ]. focus ( ) ;
      } ;
} ) ;
As usual YMMV

Posted by on 07 April 2012 | Comments (1) | categories: XPages


  1. posted by Tommy Valand on Tuesday 10 April 2012 AD:
    If you use dijit TabContainers/need to switch the tab to make the field visible, there's simple code for that in my blogpost with the enhanced messages control.

    { Link }