• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 354
  • Last Modified:

Modify validation script to set focus on field in tabbed form

I'm using the script at bottom to validate a particular field. The problem is: I don't know how to get to focus on a field in the first tab of a tabbed form.

I'm trying to get there with this -- setTimeout( function() { $( '#tabs-0' ).focus() }, 500 );

but it doesn't work.

Here's how the .NET form begins...

<div class="divider">&nbsp;</div><table id="tblControls" border="0" cellpadding="2"><tr id="ctl00_ctl00_row1_cntrlID_15290">
      <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("#tabbed").tabs(); }); </script> <div id="tabbed"> <ul> <li><a href="#tabs-0">Tab One</a></li> <li><a href="#tabs-1">End Tabs</a></li> <li><a href="#tabs-2">Medical Before Enlistment</a></li> </ul><div id="tabs-0" class="tabs"><table><tr></td>
</tr>
...
<div id="tabs-0" class="tabs">

Here's the field I need to set focus to if the date format is incorrect:

...
<input name="ctl00$ctl00$cntrlID_10724" type="text" value="Dec 11, 1914" id="ctl00_ctl00_cntrlID_10724" class="k-textbox" onkeypress="if(typeof(CheckForFormSubmit)==&#39;function&#39;){ return CheckForFormSubmit(event);}" style="width:100px;" />

Here's the script I'm validating with, which includes the focus problem:

function validate() {
 
  var theForm = document.forms['aspnetForm'];
  if (!theForm) {
    theForm = document.aspnetForm;
  }
  var emptyString = /^\s*$/ ;
  var dmmyyyy = /^((([1-9]...$/
  var ddmmyyyy = /^...$/
  var mmyyyy = /^...$/
  var yyyy = /^(17|18|19|20)\d{2}$/

  if(!emptyString.test(theForm.ctl00$ctl00$cntrlID_10724.value) && !dmmyyyy.test(theForm.ctl00$ctl00$cntrlID_10724.value) && !ddmmyyyy.test(theForm.ctl00$ctl00$cntrlID_10724.value) && !mmyyyy.test(theForm.ctl00$ctl00$cntrlID_10724.value) && !yyyy.test(theForm.ctl00$ctl00$cntrlID_10724.value))
  {
      alert("Date appears invalid. Accepted formats include: \n\n d\/mm\/yyyy, dd\/mm\/yyyy, mm\/yyyy and yyyy");
 
  //THIS IS WHERE I NEED TO FOCUS ON THE PROPER TAB
    setTimeout( function() { $( '#tabs-0' ).focus() }, 500 );    //THIS DOESN'T WORK
    theForm.ctl00$ctl00$cntrlID_10724.focus();  //THIS WORKS IF I'M ALREADY IN THE ACTIVE TAB
  }

   else {
 
    ClickOnce_ctl00_ctl00_btnSubmit();

  }

 }

Who can help?
0
GessWurker
Asked:
GessWurker
  • 3
  • 3
1 Solution
 
GaryCommented:
Slightly confusing - are you trying to move from one tab to another?
0
 
GessWurkerAuthor Commented:
Yes. There are three tabs. If I click "Submit" after finishing entry on the third tab, I want the validation function to switch focus to the first tab and to the problem field on the first tab that failed validation.
0
 
GaryCommented:
Which version of jquery? If its 1.9+

$( "#id-of-tab-container" ).tabs( "option", "active", 1 );

(maybe its 0 instead of 1 - cannot remember and leaving now)
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
GessWurkerAuthor Commented:
Thanks, Cathal, for sending me in the right direction. Points to you.

Here's what worked for me:

 $( "#tabbed" ).tabs( "option", "selected", 0 )

Cheers!
0
 
GessWurkerAuthor Commented:
The answer wasn't exactly what I needed, but it gave me enough information that I could quickly track down the syntax that worked in my situation.
0
 
GaryCommented:
:o)
I should've checked the syntax but running to the pub!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now