0

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>
mOna
  • 2,341
  • 9
  • 36
  • 60
  • All of your `` includes should be gathered in one place for your ease of troubleshooting. All listed within the `` or as the last items within the ``. Then you would have easily seen jQuery being included twice. – Sparky Sep 25 '14 at 14:11
  • Can you construct a "concise" working demo within jsFiddle? Thanks. – Sparky Sep 25 '14 at 14:14
  • @Sparky: thanks for your time, could you plz see my edit? now I have problem with the place of error message for checkbox only.. It shows the message besides the first checkbox and NOT in a separate line (it seems wrapper:li does not work for it) – mOna Sep 25 '14 at 14:14
  • I just looked at your question for the first time 30 seconds ago. I'm having a hard time following you... you can't get the two plugins working together or the message is in the wrong place. – Sparky Sep 25 '14 at 14:17
  • Please don't post the answer within the question itself and edit it to include a totally new question. You should post the answer below and then post a separate question. – Sparky Sep 25 '14 at 14:18
  • @Sparky: Sorry, you r right. actually I was afraid of being blocked if I ask many questions.. I deleted the new problem from this post – mOna Sep 25 '14 at 14:26
  • As long as you follow the posting rules (don't post duplicates, etc.) there is no limit to the number of questions you can ask. – Sparky Sep 25 '14 at 14:31
  • Thanks for info. I posted my new question here: http://stackoverflow.com/questions/26041435/jquery-validation-plugin-errorplacement-for-checkbox – mOna Sep 25 '14 at 14:42

1 Answers1

0

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

Community
  • 1
  • 1
mOna
  • 2,341
  • 9
  • 36
  • 60