Question

我的$（＆＃34;＃form1＆＃34;）。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

我试图纠正我的代码..在此之后它仍无法正常工作

这是生成的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>
                    &nbsp;
                </td>
                <td>
                    <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

我试图在http://jsfiddle.net/7T7ZX/上运行......它无效

我在Firebug上调试。它在那里调试很好。

请建议

Answer 1

生成的输入的ID不是txtFirstName - asp.net根据页面中元素的层次结构创建一个长ID。如果您不相信我，请在浏览器的F12工具（或Mac上的开发工具）中查看。

如果您可以访问页面中的jQuery内联，那么您可以使用元素生成的客户端ID，如下所示：

var firstname = $('#<%=txtFirstName.ClientID%>').val();

如果您不想这样做，解决方法是使用类而不是ID来选择元素：

<asp:TextBox ID="txtFirstName" runat="server" cssclass="firstName" />

...

var firstname = $('.firstName').val();

Answer 2

你在这里使用两个不同的选择器，我认为确保它们是正确的是个好主意。仅仅因为你的代码说id =“txtFirstName”并不意味着源代码是相同的。

加载网页并打开源代码，在源代码中找到它并确保它具有id =“form1”。然后对文本框执行相同操作，确保文本框具有id =“txtFirstName”。

有可能（如果你使用webforms，比如说）当你的网站运行时，这些项目被重命名为id =“_ 001_controller_txtFirstName”（我记不起来了，我只记得它代表你重命名！）

如果是这种情况，你需要更新你的jQuery abit，这应该可以解决问题：

var firstname = $("#<%= txtFirstName.ClientID %>");
$("#<%= form1.ClientID %>").validate({...

Answer 3

更改此行：

<form id="form1" runat="server">

到

<form id="form1" runat="server" name="form">

或尝试：

$("#form1").validate({ ... });

此处您正在form中的 name 访问JQuery元素，并且您没有给它任何名称。

因此，要么提供名称，要么通过它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>

告诉我它是否对你有帮助。

希望它能帮助你干杯！

JQuery验证不适用于asp.net文本框

3 个答案: