Question

我有一个包含不同类型字段的php表单（radio，checkbox，auto-complete，..）。一切都运作良好，直到我添加了jQuery验证插件来验证我的表单字段。

问题：自动完成字段不再有效。 jQuery验证仍然适用于“无线电”类型，但不能使用复选框，它也会停用自动完成！有人可以帮助我知道为什么会这样吗？

（因为整个代码很长，我只是粘贴自动完成部分+ 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>

Answer 1

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

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

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

现在再次自动完成：）

自动完成和复选框无法正常使用jquery验证插件

1 个答案: