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>
</ul>
</div>
<!-- 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">
<strong>Name</strong>
</div>
<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>
<div class="grid45 padding-vertical-low">
<span class="error_inline colour-error" id="error_title"><strong><span id="error_title_txt"></span></strong></span>
</div>
</div>
</div>
<!-- measurements section -->
<div id="measurements">
<!-- a lot of non-relevant form elements -->
</div>
</span>
The jQuery simply is
$(".tabs").tabs();
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.