Hyperlinking to a bookmark in a non-selected jQuery tab not working

Hi guys,

I’m trying to (bookmark) link to an input field when there’s a validation error (such as you’ve not given a value to a required field X).

I’m using jQuery to divide the form’s content over two “tabs”.

My HTML is the following:

<span id="form" class="tabs tabs-normal grid100">
    <div class="grid100 margin-bottom-medium">
        <ul class="margin-bottom-high">
            <li><a href="#exercise">Exercise</a></li>
            <li><a href="#measurements">Measurements</a></li>
    <!-- default section -->
    <div id="exercise">
        <div class="grid100 margin-bottom-medium">
            <!-- alot of other non-relevant form elements -->
            <div class="grid10 align-right padding-vertical-low rgutter5">
            <div class="grid40">
                <input id="name" class="input-string-large padding-low type-string required" type="text" value="<?php echo $name; ?>">
                <p><span class="tip">The name of the exercise.</span></p>
            <div class="grid45 padding-vertical-low">
                <span class="error_inline colour-error" id="error_title"><strong><span id="error_title_txt"></span></strong></span>
    <!-- measurements section -->
    <div id="measurements">
         <!-- a lot of non-relevant form elements  -->

The jQuery simply is


The jQuery tabs are behaving sensibly, but if for example I’m on the “Measurements” tab, submit an incomplete form, receive the following validation error…

You've not provided a <a href="#name">name</a>.

… and then click the validation error’s “#name” hyperlink, the tab doesn’t change to “Exercise” (from “Measurements”).

Not sure if this is jQuery related, but I assumed it is because the “#name” hyperlink worked fine if I’m on the “Measurements” tab when it’s clicked.

Any help is appreciated.

When the page loads, you can check window.location.hash which then allows you to activate the appropriate tab so that it’s visible.

I see what you’re saying, but the validation is done using ajax i.e. the page does not reload. Additionally, how would I associate an id with a tab i.e. it knows the “name” id is in the “Exercise” tab?

You could check for it from within the context of the exercise tab

if ($(window.location.hash, '#exercise').length > 0) {
    // it's contained within the exercise tab

Or you could use the .parents() method to check to see if the element with an id of name is contained within the one with an id of exercise

if ($(window.location.hash).parents('#exercise')) {
    // it's contained within the exercise tab

The former is more efficient, but there are a number of different ways in which this can be achieved.

Thanks for that.

For anyone reading and wondering what my final workaround solution was, here’s the code…

$('a.linkto-invalid-field').live( 'click', function(){
    // iterate through the tabs list
    $('#tabs-list li a').each(function(){ 
        // if the currently iterated tab contains the hyperlinked invalid field that's been clicked
        // then change the currently selected tab to it, and then exit
        if ($(window.location.hash, $(this).attr("href")).length > 0) {
            var index = $('#form a[href="'+$(this).attr("href")+'"]').parent().index();
            $('#form').tabs('select', index);

  1. I added a class, “.linkto-invalid-field” for each hyperlinked invalid field in the error.

  2. I added an id “#tabs-list” to the list containing the tabs.