3

こんにちは私は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検証プラグインは、名前とIDの両方で機能し、両方が同じである必要があります。

時間を節約できることを願っています。

4

3 に答える 3

1

たとえば、jqueryが検証で使用するコントロール名を取得するには

<%= DishDescriptionTextBox.UniqueID %> は ctl00$ContentPlaceHolderMain$DishDescriptionTextBox を生成します

UniqueID を使用する

于 2013-03-12T12:11:51.697 に答える
1

ブラウザーでレンダリングされたフィールドの名前を見つける必要があります。それらが DishNameTextBox および DishDescriptionTextBox と呼ばれていないことは間違いありません。

おそらく、それらは次のように呼ばれます

ctl00$ctl00$ContentPlaceHolderMain$DishNameTextBox

これは、マスター ページに含まれるフォーム フィールドを asp.net がレンダリングする方法です。フィールドを右クリックし、chrome/firefox で「要素を検査」するか、ソースを表示して DishNameTextBox を検索します。

編集

入力に ​​2 つの名前があることがわかります。jQuery 検証はこれではうまく機能しません。おそらく、これは 'ClientIDMode="Static"' に関係しています。わかりませんが、これを修正する必要があります

<input name="ctl00$ContentPlaceHolderMain$DishNameTextBox" type="text" id="DishNameTextBox" name="DishNameTextBox" style="width:300px;" />
于 2013-02-12T09:25:38.930 に答える