我想在 asp.net C# 中使用 javascript 为 gridview 中具有空格的每个文本框制作必填字段验证器

Question

<div style="height: 500px; overflow: scroll;" id="divEmployee" runat="server">
   <asp:GridView ID="gView" runat="server" AllowPaging="false"
      AutoGenerateColumns="False" CssClass="LabelText" DataKeyNames="Id"
      EmptyDataText="No Data Found !" EnableModelValidation="True"
      OnRowEditing="gView_RowEditing" Width="100%">
      <HeaderStyle CssClass="GridHeader" Height="30px" />
      <PagerStyle CssClass="GridRowPage" Font-Size="10pt" />
      <RowStyle CssClass="NormalGridRow" Height="30px" />
      <FooterStyle CssClass="GridHeader" />
      <Columns>
         <asp:BoundField DataField="Id"
            HeaderStyle-HorizontalAlign="Center" HeaderText="ID"
            ItemStyle-HorizontalAlign="Left">
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Left" />
         </asp:BoundField>
         <%--  
            <asp:TemplateField HeaderText="Id" SortExpression="" Visible="true">
                <ItemTemplate>
                    <asp:Label ID="lblEmployeeCode" runat="server" SkinID="NoColor" Text='<%# Bind("Id") %>'>
                    </asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>--%>
         <asp:BoundField DataField="DepartmentName"
            HeaderStyle-HorizontalAlign="Center" HeaderText="Department Name"
            ItemStyle-HorizontalAlign="Left">
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Left" />
         </asp:BoundField>
         <asp:BoundField DataField="LocationName"
            HeaderStyle-HorizontalAlign="Center" HeaderText="Location"
            ItemStyle-HorizontalAlign="Left">
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Left" />
         </asp:BoundField>
         <asp:BoundField DataField="SubLocation_Name"
            HeaderStyle-HorizontalAlign="Center" HeaderText="Sub Location"
            ItemStyle-HorizontalAlign="Left">
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Left" />
         </asp:BoundField>
         <asp:BoundField DataField="EmpName"
            HeaderStyle-HorizontalAlign="Center" HeaderText="Hod Name"
            ItemStyle-HorizontalAlign="Left">
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Left" />
         </asp:BoundField>
         <asp:BoundField DataField="EmpEmail"
            HeaderStyle-HorizontalAlign="Center" HeaderText="Email"
            ItemStyle-HorizontalAlign="Left">
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Left" />
         </asp:BoundField>
         <asp:TemplateField HeaderStyle-BackColor="#666666" HeaderText="Hod Employee Code" ItemStyle-Width="5%">
            <HeaderStyle BackColor="#666666" />
            <ItemStyle HorizontalAlign="Center" />
            <ItemTemplate>
               <%--
                  <asp:TextBox ID="txtEmpCode" runat="server" Text='
                    <%#Eval("EmpCode")%>' />--%>
               <asp:TextBox ID="txtEmployeeSearch" onblur="checkItemSelected(this,isItemSelected3)" runat="server"
                  Text='<%#Eval("EmpCode")%>' CssClass="txtclass">
               </asp:TextBox>
               <br />
               <span class="error">Text cannnot be left blank, Enter Employee code </span>
               <asp:TextBox ID="hdfDLSID" runat="server" Text='<%#Eval("DLSID")%>' Style="display: none">
               </asp:TextBox>
               <asp:AutoCompleteExtender ID="ExtEmployeeCode" runat="server" CompletionInterval="1" CompletionListCssClass="autoCompleteList"
                  CompletionListHighlightedItemCssClass="autoCompleteSelectedListItem" CompletionListItemCssClass="autoCompleteListItem"
                  CompletionSetCount="1" ContextKey='<%#Eval("DLSID")%>' EnableCaching="true" MinimumPrefixLength="3"
                  ServiceMethod="GetHodEmployeeList" ServicePath="~/UI/Requisition/Dropdown.asmx" TargetControlID="txtEmployeeSearch"
                  OnClientItemSelected="onItemSelected3" UseContextKey="true">
               </asp:AutoCompleteExtender>
               <%--  
                  <asp:Panel runat="server" ID="pnltxtEmployeeSearch" Height="200px" ScrollBars="Vertical"></asp:Panel>--%><%-- 
                  <asp:BalloonPopupExtender ID="BPEtxtEmployeeSearch" BalloonSize="Small" Position="TopRight"
                                                                                    CustomClassName="clsTxt" DisplayOnFocus="true" TargetControlID="txtEmployeeSearch" UseShadow="false"
                                                                                    BalloonStyle="Rectangle" BalloonPopupControlID="sptxtEmployeeSearch" runat="server"></asp:BalloonPopupExtender>--%><%--  
                  <span id="sptxtEmployeeSearch" runat="server" style="font-family: Century Gothic;">
                    <p>
                        <img alt="Info" src="../../Images/info.png" />&nbsp;&nbsp; Kindly select from the
                                                                list only
                                                                                    
                    </p>
                  </span>--%><%-- 
                  <asp:RequiredFieldValidator ID="rfvtxtEmployeeSearch" runat="server" ValidationGroup="Conf"
                                                                                    SetFocusOnError="true" ErrorMessage="
                    <img src='../../Images/alert.png' />  kindly provide details of Hod Employee Code"
                                                                                    CssClass="Alert" Display="Dynamic" ControlToValidate="txtEmployeeSearch">
                  </asp:RequiredFieldValidator>--%>
            </ItemTemplate>
         </asp:TemplateField>
         <asp:TemplateField HeaderStyle-BackColor="#666666" HeaderText="Location HR Employee Code" ItemStyle-Width="4%">
            <HeaderStyle BackColor="#666666" />
            <ItemStyle HorizontalAlign="Center" />
            <ItemTemplate>
               <%--
                  <asp:TextBox ID="txtEmpCode" runat="server" Text='
                    <%#Eval("EmpCode")%>' />--%>
               <asp:TextBox ID="txtHrlocationEmployeeCode" onblur="checkItemSelected(this,isItemSelected4)" runat="server"
                  Text='<%#Eval("HrlocationEmployeeCode")%>' CssClass="txtclass">
               </asp:TextBox>
               <br />
               <span class="error">Text cannnot be left blank, Enter Employee code </span>
               <asp:TextBox ID="hdfDLSID1" runat="server" Text='<%#Eval("DLSID")%>' Style="display: none">
               </asp:TextBox>
               <asp:AutoCompleteExtender ID="ExtHrlocationEmployeeCode" runat="server" CompletionInterval="1" CompletionListCssClass="autoCompleteList"
                  CompletionListHighlightedItemCssClass="autoCompleteSelectedListItem" CompletionListItemCssClass="autoCompleteListItem"
                  CompletionSetCount="1" ContextKey='<%#Eval("DLSID")%>' EnableCaching="true" MinimumPrefixLength="3"
                  ServiceMethod="GetHREmployeeList" ServicePath="~/UI/Requisition/Dropdown.asmx" TargetControlID="txtHrlocationEmployeeCode"
                  OnClientItemSelected="onItemSelected4" UseContextKey="true">
               </asp:AutoCompleteExtender>
               <%--  
                  <asp:Panel runat="server" ID="pnltxtEmployeeSearch" Height="200px" ScrollBars="Vertical"></asp:Panel>--%><%--  
                  <asp:BalloonPopupExtender ID="BPEtxtHrlocationEmployeeCode" BalloonSize="Small" Position="TopRight"
                                                                                   CustomClassName="clsTxt" DisplayOnFocus="true" TargetControlID="txtHrlocationEmployeeCode" UseShadow="false"
                                                                                   BalloonStyle="Rectangle" BalloonPopupControlID="sptxtHrlocationEmployeeCode" runat="server"></asp:BalloonPopupExtender>--%><%--  
                  <span id="sptxtHrlocationEmployeeCode" runat="server" style="font-family: Century Gothic;">
                    <p>
                        <img alt="Info" src="../../Images/info.png" />&nbsp;&nbsp; Kindly select Reporting
                                                               Manager from the list only
                                                                                   
                    </p>
                  </span>--%><%--  
                  <asp:RequiredFieldValidator ID="rfvtxtHrlocationEmployeeCode" runat="server" ValidationGroup="Conf"
                                                                                   SetFocusOnError="true" ErrorMessage="
                    <img src='../../Images/alert.png' />  kindly provide details of Location HR Employee Code"
                                                                                   CssClass="Alert" Display="Dynamic" ControlToValidate="txtHrlocationEmployeeCode">
                  </asp:RequiredFieldValidator>--%>
            </ItemTemplate>
         </asp:TemplateField>
         <%--   
            <asp:TemplateField HeaderText="Emp Code" ItemStyle-Width="4%">
                <ItemTemplate>
                    <asp:TextBox ID="txtEmpCode" runat="server" Text='
                        <%#Eval("EmpCode")%>' />
                        <asp:RequiredFieldValidator ID="rfvEmpCode" ControlToValidate="txtEmpCode" runat="server"
                                                                   ErrorMessage="Required" ForeColor="Red" InitialValue="0" ValidationGroup='<%# "ValidationGroup_" + Container.DataItemIndex %>'>
                        </asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>--%>
      </Columns>
   </asp:GridView>
</div>

我想在asp.net C#中使用javascript为每个具有空格的文本框设置必填字段验证器。

如何使用javascript验证网格视图文本框。

我需要在网格视图的每一行中使用javascript验证网格视图中的文本框。

Answer 1

我不会添加多个必填字段验证器，而是使用组验证或使用jquery的强大功能来基于类进行验证。

要使用javascript进行验证，您可以将 class 添加到您的html元素，然后收听您的click事件或blur事件。

例如，如果我有 1000 个文本框需要单击一个按钮来验证：

<asp:TextBox runat="server" ID="tb1"></asp:TextBox>
.
.
.
<asp:TextBox runat="server" ID="tb1000"></asp:TextBox>

我要做的是，在我需要验证的每个元素上添加.required class（对于 gridview 中的多行，ASP.NET 将添加 class，如果您将其添加到模板中）。

因此，更新后，我的文本框应如下所示：

<asp:TextBox runat="server" CssClass="required" ID="tb1"></asp:TextBox>
.
.
.
<asp:TextBox runat="server" CssClass="required" ID="tb1"></asp:TextBox>

因为，所有必填字段上都有一个 class（ required ），在单击提交按钮之前，我可以验证是否有任何字段留空：

$('#btnSubmitData').on('click', function(){
   var requiredFields = $('.required'); // will give you all the elements that have a .required class
   for(var i = 0; i < requiredFields.length; i++){
      if ($(requiredFields[i]).val().trim() == '') { // trim() to remove blank spaces
         return false; // returning false would prevent the server side event from triggering.
      }
   }
});

您还可以通过修改其 css 属性来突出显示留空的文本框：

$('#btnSubmitData').on('click', function(){
   var requiredFields = $('.required'); // will give you all the elements that have a .required class
   for(var i = 0; i < requiredFields.length; i++){
      if ($(requiredFields[i]).val().trim() == '') { // trim() to remove blank spaces
         $(requiredFields[i]).addClass('bg-red');
         return false; // returning false would prevent the server side event from triggering.
      }
   }
});

Answer 2

function Validate() {
    //Reference the GridView.
    var grid = document.getElementById("<%=gView.ClientID %>");

    //Reference all INPUT elements.
    var inputs = grid.getElementsByTagName("TextBox");

    //Set the Validation Flag to True.
    var isValid = true;
    for (var i = 0; i < inputs.length; i++) {
        //If TextBox.
        if (inputs[i].type == "text") {
           
            //If Blank
            if (inputs[i].value == "") {
                isValid = false;
            } else {
                isValid = true;
            }
        }
    }

    return isValid;
}