如何使用javascript在asp.net中gridview内的按钮单击上应用文本框空白验证？

Posted 2023-02-22

【中文标题】如何使用javascript在asp.net中gridview内的按钮单击上应用文本框空白验证？

【英文标题】：How to apply textbox blank validation on button click inside gridview in asp.net using javascript?

【发布时间】：2012-05-19 19:03:55

【问题描述】：

如何在 javascript 中的 gridview 内单击按钮时应用文本框空白验证？我有 每行包含 2 个文本框和一个保存按钮的网格视图。我想在相应的保存按钮单击时验证文本框。

我已经应用了逻辑，但问题是它只适用于硬编码的 textBox id。如何修改此代码以便它适用于所有 gridview 行？

function gvValidate() 

var grid = document.getElementById('<%= GridViewCTInformation.ClientID %>');
 if(grid!=null) 
  
   var Inputs = grid.getElementsByTagName("input"); 
    for(i = 0; i < Inputs.length; i++) 
     
      if(Inputs[i].type == 'text' ) 
       
           if (Inputs[i].id == 'ctl00_contentPlaceHolderSubScreen_GridViewCTInformation_ctl02_TextBoxCTTermCode') 
             
                 if (Inputs[i].value == "") 
                     alert("Enter values,blank is not allowed");
                     return false;
                 

             
             else if (Inputs[i].id == 'ctl00_contentPlaceHolderSubScreen_GridViewCTInformation_ctl02_TextBoxCTTermDesc') 
                 if (Inputs[i].value == "") 
                     alert("Enter values,blank is not allowed");
                     return false;
                 
             

      
     
     return true;
 

 Protected Sub GridViewTaxInformation_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridViewTaxInformation.RowDataBound
    Try
        If e.Row.RowType = DataControlRowType.DataRow Then

            Dim btnSave As Button = DirectCast(e.Row.FindControl("ButtonSave"), Button)
            btnSave.Attributes.Add("onclick", "return gvValidate()")
        End If
    Catch ex As Exception
        Common.WriteLog(ex.Message)
        Common.WriteLog((ex.StackTrace))
        Response.Redirect("..\Errors.aspx", False)
    End Try
End Sub

【问题讨论】：

所有行是什么意思？

实际上我有gridview，其中每一行我有2个文本框和一个保存按钮。我想验证单击其保存按钮的特定记录。

为什么不使用验证控件，例如：RequiredFieldValidator

【参考方案1】：

终于解决了我的问题..我刚刚将gridview行的索引传递给javascript函数。

这是代码

 function gvValidate(rowIndex) 

var grid = document.getElementById('<%= GridViewCTInformation.ClientID %>');
 if(grid!=null) 
     var Inputs = grid.rows[rowIndex + 1].getElementsByTagName("input"); 
    for(i = 0; i < Inputs.length; i++) 
     
      if(Inputs[i].type == 'text' ) 
       
                  if (Inputs[i].value == "") 
                     alert("Enter values,blank is not allowed");
                     return false;
                 

      
     
     return true;
 

Protected Sub GridViewCTInformation_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridViewCTInformation.RowDataBound
    Try
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim btnSave As Button = DirectCast(e.Row.FindControl("ButtonCTInfoSave"), Button)
            btnSave.Attributes.Add("onclick", "return gvValidate(" + e.Row.RowIndex.ToString() + ")")
        End If
    Catch ex As Exception
        Common.WriteLog(ex.Message)
        Common.WriteLog((ex.StackTrace))
        Response.Redirect("..\Errors.aspx", False)
    End Try
End Sub

【讨论】：

如果您的答案是正确的，请接受它，以便将来的用户知道。

【参考方案2】：

不要检查 id。只需检查空白值。

 if(Inputs[i].type == 'text' ) 
 

             if (Inputs[i].value == "") 
                 alert("Enter values,blank is not allowed");
                 return false;
             

  

【讨论】：

感谢您的回答..但是没有必要检查所有输入控件，如果我只想验证单击了保存按钮的文本框怎么办？

您可以从按钮对象中获取行的引用，然后选中该行中的输入框。 （我相信两者都在同一行）如果您发布输出的 html 文件将有助于理解网格的 dom 结构。

【参考方案3】：

  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*" ControlToValidate="the name of your textbox to be validated" ForeColor="Red"></asp:RequiredFieldValidator>

试试吧，你可以使用验证控件来验证任何输入

【参考方案4】：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () 
    $("[id*=GridView1] [id*=lnkUpdate]").click(function () 
        //Find the GridView Row using the LinkButton reference.
        var row = $(this).closest("tr");

        //Find the TextBox control.
        var txtName = row.find("[id*=txtName]");

        //Find the DropDownList control.
        var ddlCountries = row.find("[id*=ddlCountries]");

        var message = "";

        //Validate the TextBox control.
        if ($.trim(txtName.val()) == "") 
            message += "Please enter Name.\n";
        

        //Validate the DropDownList control.
        if (ddlCountries.val() == "") 
            message += "Please select Country.";
        

        //Display error message.
        if (message != "") 
            alert(message);
            return false;
        
        return true;
    );
);
</script>

您可以尝试上面的代码进行网格视图验证。