Question

Hi I have a change password page.

I have 2 textboxes, New Password and Confirm Password.

Both have a requiredFieldValidators.

And a compareValidator.

But what happens is when I key in the first field New Password, the second textbox’s requiredFieldValidator and CompareValidator are showing error messages at the same time.

I only want to show requiredFieldValidator and only when that validator returns true, I want to validate compareValidator.

How can I achieve that. The following is my code.

        <table class="editAccTable">
            <tr>
                <td>
                    New Password<br />                      
                    <asp:TextBox ID="txtNewPwd" runat="server" TextMode="Password" Width="204px"></asp:TextBox>
                    <br />
                    <asp:RequiredFieldValidator ID="rfvNewPwd" runat="server"
                    ControlToValidate="txtNewPwd"
                    ValidationGroup="vgChangePwd"
                    Display="Dynamic"
                    ></asp:RequiredFieldValidator>
                </td>
                <td>
                    Confirm New Password<br />                      
                    <asp:TextBox ID="txtConfPwd" runat="server" TextMode="Password" Width="204px"></asp:TextBox>
                    <br />
                    <asp:RequiredFieldValidator ID="rfvConfPwd" runat="server"
                    ControlToValidate="txtConfPwd"
                    ValidationGroup="vgChangePwd"
                    Display="Dynamic"
                    ></asp:RequiredFieldValidator>
                    <asp:CompareValidator ID="cvChangePwd" runat="server"
                    ValidationGroup="vgChangePwd"
                    ControlToValidate="txtNewPwd"
                    ControlToCompare="txtConfPwd"
                    ValueToCompare="String"  
                    Display="Dynamic"                      
                    ></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:ImageButton ID="ibtnPwdChange" runat="server" 
                    ImageUrl="/images/submit.jpg" onclick="ibtnPwdChange_Click" 
                    ValidationGroup="vgChangePwd" 
                    Width="90px" Height="36px"
                    />
                    <br />      
                    <asp:Label ID="lblSuccessPwdChange" runat="server"></asp:Label>             
                </td>
            </tr>
        </table>

Answer 1

There is a couple of work around.

For my case, I can remove the requiredFieldValidator for the second textbox as it is enough to have only compareValidator.

But there will be some cases, that there must have 2 validators. In that case, we can use css to overlap the 2 validators.