Asp.net主页的Jquery Validation插件无法正常工作

时间：2013-02-12 08:37:36

标签： jquery asp.net twitter-bootstrap jquery-validate master-pages

你好我正在使用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小时调试这个问题没有运气.. :(

好的......还有我的观察源。

<!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验证插件适用于 name和id，两者都应该相同。

我希望能节省一些时间。

3 个答案:

答案 0 :(得分：1)

您需要找出在浏览器中呈现的字段名称 - 我愿意打赌它们不会被称为DishNameTextBox和DishDescriptionTextBox。

更有可能称它们为

ctl00$ctl00$ContentPlaceHolderMain$DishNameTextBox

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

修改

你可以看到你的输入有两个名字，jQuery validate将无法很好地发挥作用。也许这与'ClientIDMode =“静态”'我不知道，但你需要解决这个问题

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

答案 1 :(得分：1)

获取jquery在验证中使用的控件名称，例如

＆lt;％= DishDescriptionTextBox.UniqueID％＆gt;将生成ctl00 $ ContentPlaceHolderMain $ DishDescriptionTextBox

使用UniqueID

答案 2 :(得分：1)

你可以试试这个

 $("#aspnetForm").validate({
        rules: {
            <%= txtfname.UniqueID %>: {
                required: true
            }
        }
    });
相关问题
最新问题