auto-complete and checkbox not work properly with jquery validation plugin

问题

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>  

回答1:

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:)

来源：https://stackoverflow.com/questions/26036771/auto-complete-and-checkbox-not-work-properly-with-jquery-validation-plugin