Erica Stockwell-Alpert Erica Stockwell-Alpert - 2 months ago 7
C# Question

Two separate search forms on page are requiring each other's fields to be filled out on validation

I have a page that has two separate search forms, one for searching by item ID and one for searching by keywords. It looks like this:

search forms

I started with just the top one, I am now adding the bottom one. The bottom one is basically a copy and paste of the first one (both are components in Sitecore). This is the code for each:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchByItemNumber.ascx.cs" Inherits="Bayer.CropScience.SC.Internet.US.Website.layouts.Bayer_CropScience.Scope.Country_United_States_Internet.RewardsCatalog.SearchByItemNumber" %>

<div class="form search-item">
<div class="clearfix">
<h3>
<label class="searchByItemNumber" for="item-num">Know your item number?</label></h3>
<div class="input-wrapper search-by-itemnumber-length">
<asp:TextBox runat="server" ID="txtSearchItemNumber" CssClass="search-by-itemnumber-length" placeholder="Search by Item Number" />
<asp:RequiredFieldValidator runat="server" ID="rfvSearchItemNumber" ControlToValidate="txtSearchItemNumber" ValidationGroup="searchCatalog" ErrorMessage="Please fill out this field." CssClass="error"></asp:RequiredFieldValidator>
</div>
<asp:Button runat="server" Text="Go" CssClass="small" OnClick="Search" ValidationGroup="searchCatalog" />
</div>
</div>





<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchByDescription.ascx.cs" Inherits="Bayer.CropScience.SC.Internet.US.Website.layouts.Bayer_CropScience.Scope.Country_United_States_Internet.RewardsCatalog.SearchByDescription" %>

<div class="form search-item">
<div class="clearfix">
<h3>
<label class="searchByKeywords" for="item-keywords">Search by keywords</label></h3>
<div class="input-wrapper search-by-keywords">
<asp:TextBox runat="server" ID="txtSearchKeyword" CssClass="search-by-keywords" placeholder="Search by keywords" />
<asp:RequiredFieldValidator runat="server" ID="rfvSearchKeyword" ControlToValidate="txtSearchKeyword" ValidationGroup="searchCatalogKeywords" ErrorMessage="Please fill out this field." CssClass="error"></asp:RequiredFieldValidator>
</div>
<asp:Button runat="server" Text="Go" CssClass="small" OnClick="KeywordSearch" ValidationGroup="searchCatalogKeywords" />
</div>
</div>


The problem is that when I fill out an item number and click Go, I get the validation error message "Please fill out this field" under the keywords box, and vice versa. How do I stop this from happening?

EDIT - The validation error occurs when I press "enter" but NOT when I click the "Go" button

EDIT 2 - It was a javascript issue, pressing enter was causing both fields to validate. I overrode it with a custom onkeypress function

Answer

You need to have different ValidationGroups. You're using ValidationGroup="searchCatalog" on all fields. Assign a Unique ValidationGroup to fields that you want to be validated together.

Comments