asp.Net ValidationGroup validating correctly except on Enter key

Question

I've seen a variety of questions here that are very close to this issue but none which seem to fit this specific scenario.

Description: I have ID and Password fields with a Log On button in the Master page. These are in the "LoginValidationGroup" and they work fine.

Now, in the Default.aspx, I have an email TextBox and submit button that are in the "NotifyMeValidation" group, and they also work, BUT not if you hit the enter key rather than the submit button. The Submit button works fine - Enter key ... not so much.

The Enter key causes the validation to occur on the LoginValidationGroup, even though the TextBox is set to CausesValidation="true", and it is in the NotifyMeValidation group.

I guarantee people are going to enter an email in that box and hit Enter. I would!!! And when they do, they're going to see a callout balloon at the top telling them the User ID is required.

What's my error here? If I need to post the actual code I can do so.

Actually, let me just go ahead and do that.

From the Default.aspx:

<asp:RequiredFieldValidator 
    runat="server"
    ValidationGroup="NotifyMeValidation"
    ID="EmailRequiredValidator"  
    ControlToValidate="SenderEmailTextBox"
    ErrorMessage="Email is Required" 
    Display="None" />
<ajaxToolkit:ValidatorCalloutExtender 
    runat="Server"
    PopupPosition="Left"
    ID="EmailRequiredValidatorExtender"
    Width="185px"
    TargetControlID="EmailRequiredValidator" 
    WarningIconImageUrl="/Images/warning.gif" />
<asp:Label ID="SenderEmailLabel" runat="server" ssociatedControlID="SenderEmailTextBox" EnableViewState="false" Text="Email:"></asp:Label>&nbsp;&nbsp;
<asp:TextBox ID="SenderEmailTextBox" runat="server" ValidationGroup="NotifyMeValidation" Width="350" BackColor="#cccccc" CausesValidation="true"></asp:TextBox>
<br /><br />
<asp:Button ID="SubmitButton" runat="server" ValidationGroup="NotifyMeValidation" EnableViewState="false" CssClass="submit" Text="Send" CausesValidation="true" OnClick="btnSubmit_Click" />

From the Master page:

<asp:Label CssClass="LoginHeading" ID="UserNameLabel" runat="server" AssociatedControlID="UserNameTextbox">UserName:&nbsp;</asp:Label>
<asp:TextBox CssClass="LoginTextBox" ID="UserNameTextbox" runat="server"  ValidationGroup="LoginValidation" CausesValidation="True"></asp:TextBox>&nbsp;
<asp:Label CssClass="LoginHeading" ID="PasswordLabel" runat="server" AssociatedControlID="PasswordTextbox">Password:&nbsp;</asp:Label>
<asp:TextBox CssClass="LoginTextBox" ID="PasswordTextBox" runat="server" TextMode="Password" ValidationGroup="LoginValidation" CausesValidation="True"></asp:TextBox>&nbsp;
<asp:Button CssClass="LoginHeading" ID="LoginButton" runat="server" Text="Button" CommandName="Login"  ValidationGroup="LoginValidation" CausesValidation="True" onclick="LoginButton_Click" />

And the Master page validators...

<asp:RequiredFieldValidator runat="server" ID="UIDRequired"
    ValidationGroup="LoginValidation"   
    ControlToValidate="UserNameTextbox"  
    Display="None"  
    ErrorMessage="<b>Required Field Missing</b><br />A User ID is required." />  
<ajaxToolkit:ValidatorCalloutExtender 
    runat="Server"
    ID="UIDValidationExtender"
    PopupPosition="Left"
    Width="185px"
    TargetControlID="UIDRequired" 
    WarningIconImageUrl="/Images/warning.gif" />
<asp:RequiredFieldValidator runat="server" ID="PWRequired"   
    ValidationGroup="LoginValidation" 
    ControlToValidate="PasswordTextbox"  
    Display="None"  
    ErrorMessage="<b>Required Field Missing</b><br />A password is required." />
<ajaxToolkit:ValidatorCalloutExtender 
    runat="Server"
    ID="PWValidationExtender"
    PopupPosition="Left"
    TargetControlID="PWRequired" 
    Width="185px"
    WarningIconImageUrl="/Images/warning.gif" />
<asp:CustomValidator 
    runat="server" 
    Display="None"
    ValidationGroup="LoginValidation" 
    ID="CustomUserExistsValidator"
    ControlToValidate="UserNameTextbox" 
    ErrorMessage="<b>Invalid UserID!</b><br />User ID doesn't exist. Please try again.<br />"
    OnServerValidate="CustomCheckUserExists"/>
<ajaxToolkit:ValidatorCalloutExtender 
    runat="server" 
    PopupPosition="Left"
    ID="UserIDCalloutExtender"
    TargetControlID="CustomUserExistsValidator"
    Width="185px"
    WarningIconImageUrl="/Images/warning.gif" />
<asp:CustomValidator 
    runat="server" 
    ID="CustomPWValidator"
    Display="None"
    ValidationGroup="LoginValidation" 
    ControlToValidate="PasswordTextbox" 
    ErrorMessage="<b>Invalid Password!</b><br />Please try again.<br />"
    OnServerValidate="CustomValidatePassword"/>
<ajaxToolkit:ValidatorCalloutExtender 
    runat="server" 
    PopupPosition="Left"
    ID="PWCalloutExtender"
    TargetControlID="CustomPWValidator"
    Width="185px"
    WarningIconImageUrl="/Images/warning.gif" />
<asp:CustomValidator 
    runat="server" 
    ID="CustomUserApprovedValidator"
    Display="None"
    ValidationGroup="LoginValidation" 
    ControlToValidate="UserNameTextbox" 
    ErrorMessage="<b>Approval Error!</b><br />This UserID exists, but is not yet approved.<br />"
    OnServerValidate="CustomCheckUserApproved"/>
<ajaxToolkit:ValidatorCalloutExtender 
    runat="server" 
    PopupPosition="Left"
    ID="UserApprovedCalloutExtender"
    TargetControlID="CustomUserApprovedValidator"
    Width="185px"
    WarningIconImageUrl="/Images/warning.gif" />

Answer 1

Try adding an <asp:Panel> around each set of controls and setting the DefaultButton property to the ID of the button you want to click when the users hits Enter.

Answer 2

Just to explain what is happening here, the aspx's default button is being fired when you press enter on the textbox. To handle this you could you could fire some jQuery code when the enter key is clicked on the textbox, this code will then perform the click on the specific button that you require. Check this