Jquery 验证在嵌套内不工作 div

Question

我的问题是 jquery 验证不是 working.The firebug 也没有显示任何类型 error.Below 是 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"
    },
});

我已将此代码放入文档中准备就绪 function.I 还为表单的每个元素提供了名称，class，id，仍然没有 success.Also，我的表单包含it.Please 帮助中的各种 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>

Answer 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 元素，则必须在第一个 option 元素上使用 value=""，而不是 value="null"验证为 required.
```
<select name="AlertSelectCategory">
    <option value="">Category</option>
    ....
```

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

Jquery 验证在嵌套内不工作 div

Jquery validate not working inside nested div

jquery

jquery-validate