使用JavaScript和ASP.NET无法对我的ASP文本框进行验证

Question

我只想问为什么我的asp文本框的表单验证不起作用。 就像用户未在文本框中输入文本时，将显示段落标记中的描述以请输入文本。 但这不起作用，请帮助我解决这个问题。

这是JavaScript代码：

function checkForm() {
var errors = [];

if ($("#itemBrand").value == "") {
    errors[0] = "Please input a text!";
}

if ($("#itemModel").value == "") {
    errors[1] = "Please input a text!";
}

if (errors.length > 0) {
    if (errors[0] != null) {
        document.getElementById("itemBrandValidate").innerHTML = errors[0];
    }

    if (errors[1] != null) {
        document.getElementById("itemModelValidate").innerHTML = errors[1];
    }
 return false;
}
return true;
}

这是aspx：

<asp:TextBox ID="itemBrand" runat="server" BackColor="#FFFF66" 
 BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
 </asp:TextBox><br />
                    <p  id="itemBrandValidate"></p>

 <asp:TextBox ID="itemModel" runat="server" BackColor="#FFFF66" 
 BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
 </asp:TextBox><br />
                    <p  id="itemModelValidate"></p>

 <asp:Button ID="Button1" runat="server" CssClass="submitButton" Text="Save 
  Item" OnClick="Button1_Click" OnClientClick="return checkForm()"/>

Answer 1

在您的文本框中添加ClientIdMode =“ Static”。 否则，.NET平台会生成一个与服务器ID属性不同的ID，并且您的Jquery选择器无法正常工作。

例如：

<asp:TextBox ID="itemBrand" ClientIDMode="static" runat="server" BackColor="#FFFF66" 
 BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
 </asp:TextBox>

Answer 2

asp.net服务器控件的客户端ID与服务器端ID不同。

您可以使用ClientIDMode = "Static" （在.NET 4.0中引入），也可以使用如下所示的ClientID ，而且我也尝试过重新编写您的验证函数。

function checkForm() {
var success = true;

var itemBrandID = "<%= itemBrand.ClientID %>" ;  

if ($("#" + itemBrandID).value == "") {
    success = false;
    document.getElementById("<%= itemBrandValidate.ClientID %>").innerHTML = "Please input a text!";
}

var itemModelID = "<%= itemModel.ClientID %>" ;  
if ($("#" + itemModelID).value == "") {
    success = false;
    document.getElementById("<%= itemModelValidate.ClientID %>").innerHTML = "Please input a text!";
}


return success;
}

还建议您阅读Rick Strahl撰写的精彩文章， 其中介绍了使用jQuery查找ASP.NET ClientID的通用方法。

希望这可以帮助 ！