个人中心
gpt4 book ai didi

带有 Asp.net 母版页的 Jquery 验证插件无法正常工作

转载 作者：行者123 更新时间：2023-12-01 03:44:43 26 4
gpt4 key购买 nike

你好，我正在使用 jquery 验证插件，它没有显示任何消息

我的 JavaScript 是

<script type="text/javascript">

         $(document).ready(function () {

             $('#mainform').validate({
                 rules: {
                     DishNameTextBox: { required: true, minlength: 2 },
                     DishDescriptionTextBox: { required: true }
                 },
                 highlight: function (label) {
                     alert('hi');
                     $(label).closest('.control-group').addClass('error');
                 },
                 success: function (label) {

                     label
                         .text('OK!').addClass('valid')
                         .closest('.control-group').addClass('success');
                 }
             });
         });
     </script>

我使用的是母版页，其 HTML 如下

<head runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>        window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
     <script src="js/jquery.validate.js" type="text/javascript"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
    <script src="js/main.js"></script>
    <link href="css/bootstrapNew.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/main.css">
    <link href="css/Custom.css" rel="stylesheet" type="text/css" />
    <link href="themes/default/default.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
    <form runat="server" id="mainform">
    <uc1:TopNavigationUserControl ID="TopNavigationUserControl1" runat="server" />
    <asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

我不确定我哪里出错了。

请帮忙，因为我已经浪费了 5 个小时来调试这个问题，但没有任何运气..:(

好的..这是我的 View 源。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>

</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>        window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
     <script src="js/jquery.validate.js" type="text/javascript"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
    <script src="js/main.js"></script>
    <link href="css/bootstrapNew.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="css/main.css" /><link href="css/Custom.css" rel="stylesheet" type="text/css" /><link href="themes/default/default.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
    <form method="post" action="ListingNew.aspx" id="mainform">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUwMzgyNTgzOQ9kFgJmD2QWAgIDD2QWAgIBD2QWAgIHD2QWBAIBDxYCHgRocmVmBTlBdXRoZXRpY2F0aW9uUmVkaXJlY3Rpb24uYXNweD9SZWRpcmVjdFVybD1MaXN0aW5nTmV3LmFzcHhkAgMPFgIfAAU5QXV0aGV0aWNhdGlvblJlZGlyZWN0aW9uLmFzcHg/UmVkaXJlY3RVcmw9TGlzdGluZ05ldy5hc3B4ZGS3V8AKZc9NhSdqUZ2aX1LviwL8XQhOzd4kclkeoKvXZw==" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwL3i6GVDwKcgKH7AgLYwYSQBQKJ9q3+BgKGmYeQCgKHmYeQCgKEmYeQCgKFmYeQCgKCmYeQCgKCmZOTCgL0jMC/B2nnxU9EgXEphsgiaKRpHC6YUG09Nnz/Q/pjswj/I9Po" />
</div>

<div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a><a class="brand" href="/Home.aspx">
                    Khana-wal</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="dropdown"><a class="dropdown-toggle js-activated" href="#">Browse Dishes
                            <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="#">Most Popular</a></li>
                                <li><a tabindex="-1" href="#">Near to you</a></li>
                            </ul>
                        </li>
                    </ul>

                    <a class="btn btn-primary pull-right" style="margin-left: 20px" href="NewListing.aspx">Add Your Dish</a>







                    <ul id="TopNavigationUserControl1_LoginUl" class="nav pull-right">
                        <li class="dropdown"><a class="dropdown-toggle js-activated" href="#">Login<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="AutheticationRedirection.aspx?RedirectUrl=ListingNew.aspx" id="TopNavigationUserControl1_FaceBookRedirectUrl" tabindex="-1">FaceBook</a></li>
                                <li><a href="AutheticationRedirection.aspx?RedirectUrl=ListingNew.aspx" id="TopNavigationUserControl1_TwitterRedirectUrl" tabindex="-1">Twitter</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- .nav-collapse -->
            </div>
            <!-- .container -->
        </div>
        <!-- .navbav-inner -->
    </div>

    <script>
        // very simple to use!
        $(document).ready(function () {
            $('.js-activated').dropdownHover(true);
        });
    </script>





    <div class="container" style="margin-top: 60px">
        <div class="span12">
            <div class="navbar-inner" style="text-align: center">
                <h5>
                    Add New Dish</h5>
            </div>
            <div class="form-horizontal" style="margin-top: 10px">
                <div class="control-group">
                    <label class="control-label" for="DishNameTextBox">
                        Dish Name</label>
                    <div class="controls">
                        <input name="ctl00$ContentPlaceHolderMain$DishNameTextBox" type="text" id="DishNameTextBox" name="DishNameTextBox" style="width:300px;" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="DishDescriptionTextBox">
                        Dish Description</label>
                    <div class="controls">
                        <textarea name="ctl00$ContentPlaceHolderMain$DishDescriptionTextBox" rows="20" cols="40" id="DishDescriptionTextBox" style="height:250px;width:500px;">
</textarea>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="PeopleDropDownList">
                        People <i class="icon-question-sign" rel="tooltip" title="How many people can sufficiently eat in a single dish">
                        </i>
                    </label>
                    <div class="controls">
                        <select name="ctl00$ContentPlaceHolderMain$PeopleDropDownList" id="ContentPlaceHolderMain_PeopleDropDownList">
    <option value="">-- Select --</option>
    <option selected="selected" value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="5+">5+</option>

</select>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <input type="submit" name="ctl00$ContentPlaceHolderMain$btnSave" value="Connect To facebook and Save" id="ContentPlaceHolderMain_btnSave" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </div>


    </form>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#mainform').validate({
                rules: {
                    DishNameTextBox: "required",
                    DishDescriptionTextBox: { required: true }
                },
                highlight: function (label) {
                    alert('hi');
                    $(label).closest('.control-group').addClass('error');
                },
                success: function (label) {

                    label
                         .text('OK!').addClass('valid')
                         .closest('.control-group').addClass('success');
                }
            });
        });
    </script>

</body>

对于正在阅读本文的任何人

1) ClientModeID = "Static"将使您的控件 ID 静态，但名称不变[如果您使用母版页，名称将会不同]

2) Jquery 验证插件适用于名称和 ID，并且两者应该相同。

我希望它能节省一些人的时间。

最佳答案

您需要找出浏览器中呈现的字段名称 - 我敢打赌它们不叫 DishNameTextBox 和 DishDescriptionTextBox。

更有可能它们被称为类似

ctl00$ctl00$ContentPlaceHolderMain$DishNameTextBox

这就是 ASP.NET 呈现母版页中包含的表单字段的方式。右键单击该字段并在 chrome/firefox 中“检查元素”，或查看源代码并搜索 DishNameTextBox。

编辑

你可以看到你的输入有两个名字，jQuery validate 不能很好地处理这个问题。也许这与“ClientIDMode="Static"”有关，我不知道，但你需要解决这个问题

<input name="ctl00$ContentPlaceHolderMain$DishNameTextBox" type="text" id="DishNameTextBox" name="DishNameTextBox" style="width:300px;" />

关于带有 Asp.net 母版页的 Jquery 验证插件无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14828495/

26 4 0
文章推荐： jquery - Dyna树ajax加载回调
文章推荐： jquery - 响应式jquery
文章推荐： jquery - AJAX同步完成
文章推荐： jquery ID 根据用户点击 URL 选择
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com