Jquery validate 在嵌套的 div 中不起作用答案

【问题标题】：Jquery validate not working inside nested divJquery validate 在嵌套的 div 中不起作用
【发布时间】：2015-04-30 12:51:27
【问题描述】：

我的问题是 jquery validate 不起作用。firebug 也没有显示任何类型的错误。下面是 jquery：

$("#AlertForm").validate({  
    rules: {
        alertcategory: "required",
        alertsubcategory: "required",
        alertcity: "required",
        alertemail: { required: true, email: true },
        alertphone: { required: true, number: true, maxlength: 10 }         
    },
    // Specify the validation error messages
    messages: {
        alertcategory: "Please Select one category from dropdown",
        alertsubcategory: "Please select subcategory based on category above.",
        alertcity: "Please select one city from dropdown",
        alertcity: "Please enter your email id",
        alertphone: "Please enter your phone number"
    },
});

我已将此代码放入文档准备功能中。我还为表单的每个元素提供了名称，类，id，但仍然没有成功。另外，我的表单内部包含各种 div 标签。请帮助。

我的表单代码：

<div class="content_part_two">
         <form method = "post" class ="AlertForm" id="AlertForm" name="AlertForm" action="#">
            <div class="container">
                <div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 content_part ">
                    <img src="<?php echo URL;?>img/alert.png"  />
                    <h3>Create Free Alert</h3>
                    <div class="full_part sell_part">
                         <div class="half_part">

                            <select name="FreeAlertSelect"   class="selectpiker" id ="FreeAlertSelect" >
                                    <option selected="selected">I Want to Sell-Remind Me</option>

                             </select>
                         </div>

                    </div>
                    <div class="full_part">
                         <div class="half_part pull-left">
                            <select name="AlertSelectCategory"  class="selectpiker" id = "AlertSelectCategory" >
                                    <option value="null">Category</option>
                                    <option>Slow</option>
                                    <option >Medium</option>
                                    <option>Fast</option>
                                    <option>Faster</option>
                             </select>
                         </div>
                         <div class="half_part pull-right">
                            <select name="AlertSelectSubcategory"   class="selectpiker" id = "AlertSelectSubcategory" >
                                    <option value="null">Sub Category</option>
                                    <option>Slow</option>
                                    <option>Medium</option>
                                    <option>Fast</option>
                                    <option>Faster</option>
                             </select>
                         </div>
                    </div>
                   <div class="full_part">
                         <div class="half_part pull-left  col-md-offset-3">
                            <select name="AlertCity"   class="selectpiker" id="AlertCity" >
                                    <option value="null">City</option>
                                    <option>Slow</option>
                                    <option>Medium</option>
                                    <option>Fast</option>
                                    <option>Faster</option>
                             </select>
                         </div>

                    </div>
                    <div class="full_part">
                         <div class="half_part pull-left">
                            <input type="text" placeholder="E-mail" id="AlertEmail" name="AlertEmail"/>
                         </div>
                         <div class="half_part pull-right">
                            <input type="text" placeholder="Phone"  id="AlertPhone" name="AlertPhone"/><span id="erralertmsg"></span>
                         </div>
                    </div>
                    <div class="full_part sell_part">
                         <div class="half_part">
                            <input type="submit" value="submit" name = "FreeAlertSubmit" id="FreeAlertSubmit"  />

                         </div>
                    </div>
                </div>
            </div>
            </form>
        </div>

【问题讨论】：

请添加您的表单代码。
你有两个 alertcity 键和一个额外的逗号。我猜第二个应该是alertemail?
我做了你提到的。仍然没有错误，并且验证插件仍然没有正常运行..
您的 HTML 字段 name 属性中没有一个实际上与您在 .validate() 方法中使用的任何名称匹配。您希望插件如何找到这些字段？否则，它将起作用：jsfiddle.net/ff7qzLu8

标签： jquery jquery-validate

【解决方案1】：

JavaScript 区分大小写。例如，您在 HTML 标记中使用 name="AlertEmail"，而在 .validate() 方法中使用 alertemail。这些必须完全匹配，而您的则不然。
您还使用了alertcategory 和alertsubcategory，但您没有任何包含这些名称的字段。您的实际元素名称是 AlertSelectCategory 和 AlertSelectSubcategory。

您在 .validate() 方法中使用的名称必须与 HTML 标记中每个字段的 name 完全匹配。否则，插件将无法找到它们。

    rules: {
        AlertSelectCategory: "required",
        AlertSelectSubcategory: "required",
        AlertCity: "required",
        AlertEmail: {
            required: true,
            email: true
        },
        AlertPhone: {
            required: true,
            number: true,
            maxlength: 10
        }
    },

最后，如果要将select 元素验证为required，则必须在第一个option 元素上使用value=""，而不是value="null"。
```
<select name="AlertSelectCategory">
    <option value="">Category</option>
    ....
```

演示：http://jsfiddle.net/ff7qzLu8/

【讨论】：