TabIndex not working as expected

Question

I am developing a registration form in ASP.NET, as usual it has lots of textboxes. I have created tabindices on the text box. Each input line is included under <ul> tag. The tab indices are set serially, as shown in image the focus jumps from 19 to 22 directly, skipping 20 and 21. Notice that the password fields with tab indices 20 and 21 surrounded by server side <div> tag.

It also occured to me that it only focuses input fields with type="text" but does not focus on input="password" even if the tabIndex property is set.

I am not sure what is the reason that on broweser focus skips elemnts with tab index 20 and 21 and how can I fix it?

code:

<ul class="divfloatleft height10imp">
    <li class="divfloatleft">
        <div class="contentlabeltext margintop15 width140">
        </div>
    </li>
    <li class="marginleft45">
        <div class="textalignleft marginleft5imp">
            <asp:CompareValidator ID="cvRetypeEmail" ForeColor="Red" Display="Dynamic" ValidationGroup="NormRegistration"
                ControlToCompare="txtEmail" ControlToValidate="txtRetypeEmail" runat="server"
                ErrorMessage=""></asp:CompareValidator>
            <asp:RequiredFieldValidator ID="rfvReTypeEmail" runat="server" ControlToValidate="txtRetypeEmail"
                ValidationGroup="NormRegistration" Display="Dynamic" ForeColor="Red" ErrorMessage=""></asp:RequiredFieldValidator>
        </div>
    </li>
</ul>
<div id="divPassword" runat="server">
    <ul class="divfloatleft">
        <li class="divfloatleft">
            <div class="contentlabeltext margintop29 width140">
                <div class="divfloatleft">
                    <asp:Literal ID="ltPassword" runat="server" Text=""></asp:Literal></div>
                <div class="smallasterix divfloatleft">
                </div>
            </div>
        </li>
        <li class="marginleft45 width500 textalignleft">
            <span class="passwordtext divfloatleft marginleft3imp  width100p">8 Character min. Must
                include number, letter and symbol.</span>
            <br />
            <div class="divfloatleft">
                <div class="divfloatleft width247 marginleft4" title="Password">
                    <asp:TextBox ID="txtPassword" runat="server" TabIndex="20" ToolTip="Password" TextMode="Password"
                        title="Email" CssClass="width247 height27 borderCEE1F4 bordernone" MaxLength="128"></asp:TextBox>
                </div>
                <div class="divfloatleft">
                    <span class="infohelp infohelp marginleft5 margintop5 divfloatleft">
                        <img class="tool-tip-link" src="../../App_Themes/Default/Images/info.png" alt="" />
                        <span class="white-text-content" style="z-index: 2;">

                        </span></span>
                </div>
            </div>
        </li>
    </ul>
    <ul class="divfloatleft height10imp">
        <li class="divfloatleft width140 height10">
            <div class="contentlabeltext width140 height10">
            </div>
        </li>
        <li class="marginleft45 width500"><span class="passwordtext divfloatleft width100p">
        </span>
            <div class="textalignleft marginleft5imp">
                <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword"
                    ValidationGroup="NormRegistration" Display="Dynamic" ErrorMessage=""
                    ForeColor="Red" CssClass="lineheight10" SetFocusOnError="True" />
                <asp:RegularExpressionValidator ID="revPasswordLength" runat="server" ControlToValidate="txtPassword"
                    ValidationGroup="NormRegistration" ErrorMessage=""
                    ForeColor="Red" CssClass="lineheight10" ValidationExpression="^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[^0-9A-Za-z]).{8,50}$"
                    Display="Dynamic" />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server" ControlToValidate="txtPassword"
                    ValidationGroup="NormRegistration" ErrorMessage=""
                    ForeColor="Red" CssClass="lineheight10" ValidationExpression="[\x00-\x80]+" Display="Dynamic" />
            </div>
        </li>
    </ul>
    <ul class="divfloatleft">
        <li class="divfloatleft width140">
            <div class="contentlabeltext margintop19imp divfloatleft">
                <asp:Literal ID="ltConfirmPassword" runat="server" Text=""></asp:Literal></div>
            <div class="smallasterix divfloatleft margintop19imp">
            </div>
        </li>
        <li class="marginleft45 margintop10 textalignleft">
            <div class="textboxstyle">
                <div class="textboxLeft divfloatleft">
                </div>
                <div class="textboxMid divfloatleft width241" title="Retype Password">
                    <asp:TextBox ID="txtRetypePassword" runat="server" TabIndex="21" ToolTip="Confirm Password"
                        TextMode="Password" CssClass="ie7margintop5 ie8margintop5  width241 height35 backgroundtrans bordernone"
                        MaxLength="128"></asp:TextBox>
                </div>
                <div class="textboxRight divfloatleft">
                </div>
            </div>
        </li>
    </ul>
    <ul class="divfloatleft width100p height10imp">
        <li class="divfloatleft width140 height10">
            <div class="contentlabeltext width140 height10">
            </div>
        </li>
        <li class="marginleft45">
            <div class="textalignleft marginleft5imp">
                <asp:CompareValidator ID="cvRetypePassword" runat="server" ControlToCompare="txtPassword"
                    ValidationGroup="NormRegistration" ControlToValidate="txtRetypePassword" ErrorMessage=""
                    ForeColor="Red" Display="Dynamic" />
                <asp:RequiredFieldValidator ID="rfvRetypePassword" runat="server" ControlToValidate="txtRetypePassword"
                    ValidationGroup="NormRegistration" Display="Dynamic" ForeColor="Red" ErrorMessage="" />
            </div>
        </li>
    </ul>
</div>
<ul class="divfloatleft width100p">
    <div class="readagreementtext marginleft190 textalignleft ">
        <asp:Label ID="lblPrivacyText" runat="server"></asp:Label></div>
    <li class="divfloatleft textalignleft margintop10 width140">
        <div class="contentlabeltext margintop5 divfloatleft ">
            <asp:Literal ID="ltValidationText" runat="server" Text=""></asp:Literal>
        </div>
        <div class="smallasterix divfloatleft margintop5">
        </div>
    </li>
    <li class="divfloatleft marginleft45">
        <div class="margintop10">
            <recaptcha:RecaptchaControl ID="recaptcha" runat="server" TabIndex="22" Theme="white"/>
        </div>
    </li>
</ul>
<ul class="divfloatleft width100p">
    <li class="divfloatleft width140 height10">
        <div class="contentlabeltext width140 height10">
        </div>
    </li>
    <li class="marginleft45">
        <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>
    </li>
</ul>
<ul>
    <li class="divfloatleft marginleft160">
        <div>
            <asp:Button ID="btnRegistration" runat="server" CssClass="createaccount marginleft25 margintop12"
                TabIndex="23" CausesValidation="true" ValidationGroup="NormRegistration" OnClick="RegisterButton_Click" />
        </div>
    </li>
</ul>

Answer 1

Have you tried setting the tab stop property of each control to true?

Also check out the solution on this link