jquery 验证在内容占位符中不起作用

Question

我正在尝试使用 jquery 验证我的 asp 页面。我已经通过 nuget 包下载了所有必需的 js 文件。请参阅所附图片。我遵循了 http://www.dotnetcurry.com/ShowArticle.aspx?ID=310&AspxAutoDetectCookieSupport=1 中提供的教程并尝试了一些简单的验证，但它不起作用。

我尝试在 firefox 和 chrome 中打开我的页面并检查了控制台错误。浏览器的控制台中没有显示错误，但我也没有得到任何结果。我无法弄清楚我的流程或代码有什么错误。我的代码::

// master page
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Global.master.cs" Inherits="MIS.content.Global" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="../Scripts/jquery-3.1.1.min.js"></script>    
    <script type="text/javascript" src="../Scripts/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.validation.net.webforms.min.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="container">
            <div id="tray">
                testing
            </div>
            <div id="cols">
                <div id="aside">                    
                </div>
                <div id="content">
                    <div id="main_content">                        
                        <div>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</body>
</html>

aspx 页

<%@ Page Language="C#" MasterPageFile="Global.master" AutoEventWireup="true" CodeBehind="CustomerRegistration.aspx.cs" Inherits="MIS.content.CustomerRegistration" %>

<asp:Content ID="UserContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">   
    <script type="text/javascript">
        $(document).ready(function() {
            $("#aspnetForm").validate({
                rules: {
                    <%=txt_name.UniqueID %>: {
                        minlength: 2,
                        required: true
                    },
                    <%=txt_gender.UniqueID %>: {                       
                        required: true,
                        email:true
                    }
                }, messages: {}
            });
        });
    </script>
    <div style="width: 100%; font-family: Arial,Helvetica, sans-serif;">
        <div style="text-align: left; width: 100%; font-size: 13px; margin-bottom: 5px;">
            <b>Name :</b>
            <asp:textbox id="txt_name" runat="server" />
        </div>
        <div style="text-align: left; width: 100%; font-size: 13px; margin-bottom: 5px;">
            <b>Gender :</b>
            <asp:textbox id="txt_gender" runat="server" />
        </div>
        <div style="text-align: left; width: 100%; font-size: 13px; margin-bottom: 5px;">
            <asp:button id="btnSubmit" runat="server" text="Submit" />
        </div>
    </div>
</asp:Content>

Answer 1

改变

$("#aspnetForm").validate({

进入

$("#form1").validate({

在您提供的 the link 中，ID #formmaster 的验证已激活。在他们的截图中，ID formmaster 被用作 <form> 标签的 ID：<form id="formmaster" runat="server">

并检查验证是否需要字段名称或 ID。大多数时候它使用 ID。因此，您可能需要将 <%=txt_name.UniqueID %> 更改为 <%=txt_name.ClientID %>

jquery 验证在内容占位符中不起作用

jquery validate not working in content place holder

javascript

asp.net

jquery

jquery-validate