Solved

Modify validation script to set focus on field in tabbed form

Posted on 2014-01-30
6
334 Views
Last Modified: 2014-01-30
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
Comment
Question by:GessWurker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39822920
Slightly confusing - are you trying to move from one tab to another?
0
 

Author Comment

by:GessWurker
ID: 39822964
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39822984
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:GessWurker
ID: 39823010
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
 

Author Closing Comment

by:GessWurker
ID: 39823014
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
 
LVL 58

Expert Comment

by:Gary
ID: 39823015
:o)
I should've checked the syntax but running to the pub!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question