C# 放置验证器会干扰面板布局

当我将RequiredFieldValidator放入asp.net页面时，它会干扰页面布局。它可以在所有地方工作，但在特定的地方会干扰页面布局

在放置验证器之前：

<asp:Panel ID="pnlSearchComplaint" Visible="false" BackColor="#dbdbdb"
             runat="server" Width="400px">
            <br />
            <label>Search By Subject</label>
            <asp:TextBox ID="txtSearchCompBySubject" runat="server" ></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" 
                                ControlToValidate="txtSearchCompBySubject" ErrorMessage="Enter Subject" 
                                ForeColor="Red" ValidationGroup="GroupSearchCompSubject">Enter Subject
            </asp:RequiredFieldValidator>
            <br/>
            <asp:Button ID="btnSearchBySubject" ValidationGroup="GroupSearchCompSubject"  
                        CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchBySubject_Click" />
            <asp:GridView ID="gridViewComplaintsBySubject" AllowPaging="true" OnPageIndexChanging="gridViewComplaintsBySubject_PageIndexChanging" AutoGenerateSelectButton="true" runat="server" CssClass="mGrid" OnSelectedIndexChanged="gridViewComplaintsBySubject_SelectedIndexChanged" Width="408px">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
            <br />
            <label>Search By Date</label>
            <asp:Label ID="lblDateFrom" runat="server" Text="From"></asp:Label>
            <asp:TextBox ID="txtFromDate" runat="server" ></asp:TextBox>
           <asp:CalendarExtender ID="CalendarExtenderFromDate" TargetControlID="txtFromDate" runat="server">
            </asp:CalendarExtender>
            <asp:Label ID="lblDateTo" runat="server" Text="To"></asp:Label>
            <asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="CalendarExtenderToDate" TargetControlID="txtToDate" runat="server">
            </asp:CalendarExtender>
            <asp:Button ID="btnSearchByDate"  CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchByDate_Click" />
            <asp:GridView ID="gridViewComplaintsByDate" AllowPaging="true"  AutoGenerateSelectButton="true" runat="server" CssClass="mGrid"  Width="408px" OnPageIndexChanging="gridViewComplaintsByDate_PageIndexChanging" OnSelectedIndexChanged="gridViewComplaintsByDate_SelectedIndexChanged">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
           <br />
    </asp:Panel>

按主题搜索
输入主题


找不到此输入的数据。再试一次。


按日期搜索
找不到此输入的数据。再试一次。

放置验证器后：

<asp:Panel ID="pnlSearchComplaint" Visible="false" BackColor="#dbdbdb"
             runat="server" Width="400px">
            <br />
            <label>Search By Subject</label>
            <asp:TextBox ID="txtSearchCompBySubject" runat="server" ></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" 
                                ControlToValidate="txtSearchCompBySubject" ErrorMessage="Enter Subject" 
                                ForeColor="Red" ValidationGroup="GroupSearchCompSubject">Enter Subject
            </asp:RequiredFieldValidator>
            <br/>
            <asp:Button ID="btnSearchBySubject" ValidationGroup="GroupSearchCompSubject"  
                        CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchBySubject_Click" />
            <asp:GridView ID="gridViewComplaintsBySubject" AllowPaging="true" OnPageIndexChanging="gridViewComplaintsBySubject_PageIndexChanging" AutoGenerateSelectButton="true" runat="server" CssClass="mGrid" OnSelectedIndexChanged="gridViewComplaintsBySubject_SelectedIndexChanged" Width="408px">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
            <br />
            <label>Search By Date</label>
            <asp:Label ID="lblDateFrom" runat="server" Text="From"></asp:Label>
            <asp:TextBox ID="txtFromDate" runat="server" ></asp:TextBox>
           <asp:CalendarExtender ID="CalendarExtenderFromDate" TargetControlID="txtFromDate" runat="server">
            </asp:CalendarExtender>
            <asp:Label ID="lblDateTo" runat="server" Text="To"></asp:Label>
            <asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="CalendarExtenderToDate" TargetControlID="txtToDate" runat="server">
            </asp:CalendarExtender>
            <asp:Button ID="btnSearchByDate"  CssClass="btn btn-success" runat="server" Text="Search" 
                        ClientIDMode="Static" OnClick="btnSearchByDate_Click" />
            <asp:GridView ID="gridViewComplaintsByDate" AllowPaging="true"  AutoGenerateSelectButton="true" runat="server" CssClass="mGrid"  Width="408px" OnPageIndexChanging="gridViewComplaintsByDate_PageIndexChanging" OnSelectedIndexChanged="gridViewComplaintsByDate_SelectedIndexChanged">
             <EmptyDataRowStyle BorderStyle="None" ForeColor="Red" BorderWidth="0px" />
             <EmptyDataTemplate>
               No Data Found for this Input. Try Again.
             </EmptyDataTemplate> 
             <SelectedRowStyle CssClass="selected-row"  ForeColor="white" />
           </asp:GridView>
           <br />
    </asp:Panel>

代码：

按主题搜索
输入主题


找不到此输入的数据。再试一次。


按日期搜索
输入主题
找不到此输入的数据。再试一次。

请在验证控件中设置“Display='dynamic'”属性

<asp:RequiredFieldValidator Display="Dynamic"></asp:RequiredFieldValidator>

如果您不想在UI显示消息时打扰它，那么

<asp:RequiredFieldValidator Display="Dynamic" ErrorMessage="*" ToolTip="Set your message here"></asp:RequiredFieldValidator>

编辑1：

<label>
    Search By Date</label>
<asp:Label ID="lblDateFrom" runat="server" Text="From"></asp:Label>
<asp:TextBox ID="txtFromDate" runat="server"></asp:TextBox>
<asp:Label ID="lblDateTo" runat="server" Text="To"></asp:Label>
<asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>
<div>
    <asp:RequiredFieldValidator Display="Dynamic" ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtFromDate"
        ErrorMessage="Enter Subject" ForeColor="Red" ValidationGroup="GroupSearchCompSubject">Enter Subject
    </asp:RequiredFieldValidator>
</div>
<asp:Button ID="btnSearchByDate" CssClass="btn btn-success" runat="server" Text="Search"
    ClientIDMode="Static" />

按日期搜索
输入主题

是，

RequiredFieldValidator

具有确定的宽度，请尝试在浏览器中检查元素。你会看到它有一个宽度，即使它是隐藏的。我所做的是使用

将

显示为

无

，然后使用

验证摘要

显示验证消息。是的，我也这样做了，但是错误消息干扰了内容。谢谢，它起了作用，但另一个问题是，它没有显示仅显示的消息*。要在其中显示此错误消息的位置。从文本框上方/下方和顶部/底部？从下方到搜索框