自动完成和未复选框使用jQuery验证插件正常工作 [英] auto-complete and checkbox not work properly with jquery validation plugin
问题描述
我有不同类型的字段（单选，多选，自动完成，..）一个PHP的形式。一切运作良好，直到我加入jQuery的验证插件来验证我的表单字段。
问题：自动完成字段不起作用了。 jQuery验证仍然正常工作与单选类型，但不与复选框工作，并停用自动完成，以及！可能有人请帮助我知道为什么会这样？
（因为整个code是很长，我只贴自动完成部分+ jQuery的表单验证）
＆LT;表ID =窗体2行动=page3.php方法=后＆GT;
＆所述;字段集的id =Form_Questions＆GT; ＆LT; H2＆GT; ＆LT;传奇＆GT;调查问题＆LT; /传说＆GT; ＆LT; / H＆GT;＆LT;字段集ID =Q9＆GT; ＆LT;传说级=Q9＆GT;＆LT; /传说＆GT;
＆LT;标签＆gt;谁是你最喜欢的演员/女演员＆LT;跨度＆GT; * LT; / SPAN＆GT;＆LT; /标签＆gt;
＆LT; DIV CLASS =字段集的内容＆GT;
＆所述p为H.;＆LT;链接rel =stylesheet属性HREF =http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css类型=文/ CSS/＆GT;＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-1.9.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/ui/1.10.1/jquery-ui.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT; DIV CLASS =内容左＆GT;
＆LT; A HREF =＃ID =addScnt＆gt;添加行＆LT; / A＆GT;＆LT; DIV ID =p_scents＆GT;
＆所述p为H.;
＆LT;标签样式=保证金底：10px的;对于=p_scnts＆GT;
＆LT;输入类=自动填充类型=文本ID =p_scnt大小=20NAME =Q9 []值=占位符=输入文本/＆GT;
＆LT; /标签＆gt;
＆所述; / P＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆所述; / P＆GT;
＆LT; / DIV＆GT;
＆LT; /字段集＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
//自动完成
$（自动填充）。自动完成（{
来源：actorsauto.php
的minLength：3
}）;
}）;$（函数（）{
VAR scntDiv = $（'＃p_scents'）;
。VAR I = $（'＃p_scents P'）的大小（）+ 1;
$（'＃addScnt'）。在（'点击'，功能（E）{
亦即preventDefault（）;
e.stopPropagation（）;
$（'＆LT; P＆GT;＆LT;标签样式=保证金底：10px的;为=p_scnts＆GT;＆LT;输入类=自动填充式=TEXTNAME =p_scnt []大小= 20ID =p_scnt_'+ I +VALUE =占位符=添加文字/＆GT;＆LT; /标签=remScnt＆GT;＆LT;标签样式=填充左：400像素;＆GT ;＆LT; A HREF =＃类=remScnt＆GT;删除＆LT; / A＆GT;＆LT; /标签＆gt;＆LT; / p＆GT;'）appendTo（scntDiv）;$（函数（$）{
$（'＃p_scnt_'+ I）.autocomplete（{
来源：actorsauto.php
的minLength：3
}）;
}）;
我++; //应该在这里增加计数器
返回false;
}）;$（'内容左'）。在（'点击'，'.remScnt'，函数（）{
如果（ⅰ→2）{
$（本）。家长（P），删除（）;
一世 - ;
}
返回false;
}）;
}）; //其他问题（tyoe：单选，多选，...）
.....
＆LT;输入类=MainForm的类型=提交名称=继续VALUE =保存并继续/＆GT;
＆LT; /表及GT;＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.11.1.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://jqueryvalidation.org/files/dist/jquery.validate.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http://jqueryvalidation.org/files/dist/additional-methods.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;$（文件）。就绪（函数（）{
$（'＃窗口2）。验证（{//初始化插件
errorLabelContainer：#messageBox
包装：礼 规则：{
Q8 []：{
要求：真实，
}，
Q9 []：{
要求：真实，
}，
Q10：{
要求：真实，
}，
Q11：{
要求：真实，
}
}， errorPlacement：功能（错误，元素）{
如果（element.attr（类型）==单选）{
error.insertBefore（元件）;
}其他{
error.insertAfter（元件）;
}
} }）;
}）;
＆LT; / SCRIPT＆GT;
感谢David谁回答<一个href=\"http://stackoverflow.com/questions/14903635/implementing-multiple-jquery-plugins-on-one-page\">This帖子，我可以解决这个问题。
正如他所说的：
jQuery库应仅加载一次，不管是什么版本。如果再次加载它，任何插件添加加入之前，最后一次将不可用。
所以，我只是删除
＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-1.11.1.min.js＆GT;＆LT; / SCRIPT＆GT;现在又来自动完成的作品：）
I have a php form with different types of fields(radio, checkbox, auto-complete, .. ). everything worked well, till I added jQuery validation plugin to validate my form fields.
Problem: auto-complete field does not work any more. jQuery validation still works fine with 'radio' types, but not work with checkbox, and it deactivated auto-complete as well!! Could someone please help me to know why this happened?
(since whole code was very long, I just paste the auto-complete part + jQuery form validation)
<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>
解决方案Thanks to David who answered This post, I could solve the problem. As he said:
The jquery library should only be loaded once, no matter what version. If you load it again, any plugin added before it was added the last time won't be available.
So, I just removed
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>and now auto-complete works again:)
这篇关于自动完成和未复选框使用jQuery验证插件正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
