Question

我的问题是jquery验证不起作用。萤火虫也没有显示任何类型的错误。下面是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>

Answer 1

JavaScript区分大小写。例如，您在name="AlertEmail"方法中使用alertemail时在HTML标记中使用.validate()。这些必须完全匹配，而你的则不然。
您还使用了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
        }
    },

最后，如果您希望将value=""元素验证为{{{}，则必须在第一个value="null"元素上使用option，而不是select 1}}。
```
required
```

DEMO：http://jsfiddle.net/ff7qzLu8/

Jquery验证在嵌套div中不起作用

1 个答案: