Question

I have a form that I’m trying to run some basic validation on using jquery. I have empty anchors with names that correspond to the names of the inputs. When the first field is found empty, it stores the name of the input and when the validations script is done, it calls window.location.hash = name + “hash”, which is the name of the empty anchor. The problem is, it’s moving the window so that the anchor is showing at the very top of the screen, and I’d like it to move the windows so the anchor shows in the middle of the screen. Is this possible? Here’s what I have.

function formValidate()
{
var $retValue = true;
var $inputs = $('.req');
var $winLoc = '';
$inputs.each( function()
{
    if($(this).val() === "" && this.name != "salesmanName2")
    {
        var $helper = this.name + "Help";
        var $pointer = this.name + "Pointer";
        event.preventDefault();
        ($(this).addClass('reqMissing'));
        showHelper($helper, $pointer);
        if($winLoc == '' && this.name != "salesmanName2")
        {
            $winLoc = this.name + "Anchor"; 
        }
        $retValue = false;
    }
    else
    {
        ($(this).removeClass('reqMissing'));    
    }
});
if($winLoc !== '')
{
    window.location.hash=$winLoc;
}
return $retValue;   
}

And here’s a snippet of the form.

<li>
    <a name="controlNumberAnchor"></a>
    <label for='controlNumber'>Control Number: </label>
    <input class='req' type='text' name='controlNumber' size='10' /><em>*</em>
    <div id='controlNumberPointer' class='pointer'></div>
    <div id='controlNumberHelp' class='helpBox'>Control number required</div>
</li>

Answer 1

It is not possible by just using hash. You will have to set the scrollTop of the document by with the calculcated value based on the hash. Try this.

function formValidate()
{
var $retValue = true;
var $inputs = $('.req');
var $winLoc = '';
$inputs.each( function()
{
    if($(this).val() === "" && this.name != "salesmanName2")
    {
        var $helper = this.name + "Help";
        var $pointer = this.name + "Pointer";
        event.preventDefault();
        ($(this).addClass('reqMissing'));
        showHelper($helper, $pointer);
        if($winLoc == '' && this.name != "salesmanName2")
        {
            $winLoc = this.name + "Anchor"; 
        }
        $retValue = false;
    }
    else
    {
        ($(this).removeClass('reqMissing'));    
    }
});
if($winLoc !== '')
{
    //window.location.hash=$winLoc;
    var top = $('[name=' + $winLoc + ']').offset().top;
    $(document).scrollTop(top - ($(window).height()/2)); 
}
return $retValue;   
}