自动完成和复选框无法与 jquery 验证插件一起正常工作答案

【问题标题】：auto-complete and checkbox not work properly with jquery validation plugin自动完成和复选框无法与 jquery 验证插件一起正常工作
【发布时间】：2014-09-25 22:24:08
【问题描述】：

我有一个包含不同类型字段（单选、复选框、自动完成、..）的 php 表单。一切正常，直到我添加了 jQuery 验证插件来验证我的表单字段。

问题：自动完成字段不再起作用。 jQuery 验证仍然适用于 'radio' 类型，但不适用于复选框，并且它也禁用了自动完成！有人可以帮我知道为什么会这样吗？

（由于整个代码很长，我只是粘贴了自动完成部分+jQuery表单验证）

<form id="form2" action="page3.php" method="post">
<fieldset id = "Form_Questions"> <h2> <legend>Survey Questions</legend> </h2>

<fieldset id = "q9"> <legend class="Q9"></legend>
<label> Who are your favourite actors/actresses?<span>*</span></label>
<div class="fieldset content"> 
<p>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>

<div class="content-left">
<a href="#" id="addScnt">Add rows</a>

<div id="p_scents">
<p>
<label style="margin-bottom:10px;" for="p_scnts">
<input class="autofill" type="text" id="p_scnt" size="20" name="q9[] value="" placeholder="Enter text" />
</label>
</p>
</div>

</div>
</p>
</div>
</fieldset>

<script type="text/javascript">
$(function() {
//autocomplete
$(".autofill").autocomplete({
source: "actorsauto.php",
minLength: 3
});                              
});

$(function () {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill"    type="text" name="p_scnt[]" size="20" id="p_scnt_' + i + '" value=""  placeholder="Add text" /></label  for="remScnt"> <label style="padding-left:400px;"><a href="#" class="remScnt">Remove</a></label></p>').appendTo(scntDiv);

$(function ($) {
$('#p_scnt_' + i).autocomplete({
source: "actorsauto.php",
minLength: 3
});
});
i++; // should increase counter here
return false;
}); 

$('.content-left').on('click', '.remScnt', function () {
if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
 });
}); 

 //other questions (tyoe: radio, checkbox,...)
 .....
<input class="mainForm" type="submit" name="continue" value="Save and Continue" />
</form>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>

$(document).ready(function() {
 $('#form2').validate({ // initialize the plugin
    errorLabelContainer: "#messageBox",
    wrapper: "li",

    rules: {
        q8[]: {
            required: true,
        },
        q9[]: {
            required: true,
        },
        q10: {
            required: true,
        },
        q11: {
            required: true,
        }
    },

      errorPlacement: function(error, element) {
         if (element.attr("type") == "radio") {
         error.insertBefore(element);
       } else {
         error.insertAfter(element);
     }
    } 

  }); 
});
</script>

【问题讨论】：

您的所有 <script></script> 包含应集中在一个位置，以便于排除故障。所有列在<head></head> 中或作为<body></body> 中的最后一项。然后你会很容易看到 jQuery 被包含了两次。
你能在 jsFiddle 中构建一个“简洁”的工作演示吗？谢谢。
@Sparky：感谢您的宝贵时间，您能看看我的编辑吗？现在我对仅复选框的错误消息位置有问题。它在第一个复选框之外显示消息，而不是在单独的行中（似乎 wrapper:li 不适用于它）
我刚刚在 30 秒前第一次查看了您的问题。我很难跟上你……你不能让两个插件一起工作，或者消息放错了地方。
请不要在问题本身中发布答案并对其进行编辑以包含一个全新的问题。您应该在下面发布答案，然后再发布一个单独的问题。

标签： jquery autocomplete jquery-validate

【解决方案1】：

感谢回复This post的大卫，我可以解决问题。正如他所说：

jquery 库应该只加载一次，无论是什么版本。如果再次加载，上次添加之前添加的任何插件都将不可用。

所以，我刚刚删除了<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

现在自动完成功能再次起作用:)

【讨论】：