JQuery验证不适用于asp.net文本框
我的$("#form1").validate({})；不工作
我的MarkUp
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Default.aspx.cs" Inherits="WebApplication1._3_Tier._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Insert Records into DataBase</title>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/a.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
<h3>
Demo: 3-Tier Architecture</h3>
<form id="form1" runat="server">
<div>
<p>
<a href="List.aspx">List Records</a></p>
<asp:Label ID="lblMessage" runat="Server" ForeColor="red" EnableViewState="False"></asp:Label>
<table style="border: 2px solid #cccccc;">
<tr>
<td>
First Name:
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="AddRecords" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>我的JS
$(document).ready(function () {
var firstname = $('#txtFirstName').val();
$("#form1").validate({
rules: {
firstname: {
required: true,
}
},
messages: {
firstname: {
required: "Please provide your firstname",
}
}
});
});我帮了这个忙
JQuery Validation is not validating
我试图纠正我的代码..Still之后，它不起作用
这是生成的HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<style type="text/css">
body
{
font-family: Arial, Trebuchet Ms;
font-size: 10pt;
}
</style>
<title>
Insert Records into DataBase
</title>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/a.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
<h3>
Demo: 3-Tier Architecture</h3>
<form method="post" action="_Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjEzNDcyMDczZGQt6WgCuARQGKOLro6pdjwaUvt/QFoxwH5v1RzCNAUj7w==" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAX8Nm0IHiD/KCZocX+BlM2eTNr8+Dx/H+2fNfPhxgyex+tZBdiRon5d1qE03oo5TvNalnLgDFTt8y4U1Y3swfOyPOaW1pQztoQA36D1w/+bXdBIngoW+rlnKfoMZ3QFO1yNN5iBqFwWfHPEKsfQ/9eW" />
</div>
<div>
<p>
<a href="List.aspx">List Records</a></p>
<span id="lblMessage" style="color:Red;"></span>
<table style="border: 2px solid #cccccc;">
<tr style="background-color: #507CD1; color: White;">
<th colspan="3">
Add Records
</th>
</tr>
<tr>
<td>
First Name:
</td>
<td>
<input name="txtFirstName" type="text" id="txtFirstName" />
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input name="txtLastName" type="text" id="txtLastName" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input name="txtAge" type="text" size="4" id="txtAge" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>我试着在http://jsfiddle.net/7T7ZX/上运行，...it不起作用
我在调试Firebug。那里调试得很好。
请建议
回答 3
Stack Overflow用户
发布于 2014-05-07 14:07:41
生成的输入的ID不会是txtFirstName -- asp.net将根据页面中元素的层次结构创建一个长ID。如果您不相信我的话，请在浏览器的F12工具(或mac上的开发工具)中查看。
如果您可以访问页面中的jQuery内联，那么可以使用元素生成的客户机ID，如下所示：
var firstname = $('#<%=txtFirstName.ClientID%>').val();如果不想这样做，解决方法是使用类而不是is来选择元素：
<asp:TextBox ID="txtFirstName" runat="server" cssclass="firstName" />..。
var firstname = $('.firstName').val();Stack Overflow用户
发布于 2014-05-07 13:57:32
您在这里使用两个不同的选择器，我认为确保它们是正确的是个好主意。仅仅因为您的代码写着id="txtFirstName“并不意味着源代码是相同的。
加载网页并打开源代码，在源代码中找到您的代码，并确保它有一个id="form1“。然后对文本框执行同样的操作，确保textbox有一个id="txtFirstName“。
当您的网站运行时，这些项目有可能被重命名为id="_001_controller_txtFirstName“(我不记得了，我只是记得它代表您重命名了)。
如果是这样的话，您将需要更新您的jQuery abit，这应该可以做到：
var firstname = $("#<%= txtFirstName.ClientID %>");
$("#<%= form1.ClientID %>").validate({...Stack Overflow用户
发布于 2014-05-07 13:52:44
更改此行：
<form id="form1" runat="server">
至
<form id="form1" runat="server" name="form">
或尝试：
$("#form1").validate({ ... });
在这里，您正在通过name在JQuery中访问form元素，并且没有给它任何名称。
因此，要么给出一个名称，要么通过它的id访问它。
根据你的评论。
编辑：
试试这个：
改变：
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />至：
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" OnClick="validate_form(this);event.preventDefault();event.stopPropagation();" />在您的<head>部分中添加：
<script type="text/javascript">
function validate_form(x){
var frm=$(x).closest("form");
$(frm).validate({...});
}
</script>如果对你有帮助就告诉我。
希望它能帮你加油！
https://stackoverflow.com/questions/23519654
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号