2014-09-25 2 views
11

Я использую плагин проверки jQuery для проверки моей формы. Моя проблема - это место сообщения об ошибке для флажка. см это изображение:jQuery Validation plugin errorPlacement для checkbox

enter image description here

Это HTML часть связана с Флажки + JQuery Validation:

<fieldset id = "q8"> <legend class="Q8"></legend> 
<label> What are your favourite genres of movies?<span>*</span></label> 
<div class="fieldset content"> 

<style type="text/css"> 
.checkbox-grid li { 
display: block; 
float: left; 
width: 25%; 
}  
</style> 

<ul class="checkbox-grid"> 
<li><input type="checkbox" name="q8[]" value="Action"><label for="checkgenre[]">Action</label></li> 
<li><input type="checkbox" name="q8[]" value="Adventure"><label for="checkgenre[]">Adventure</label></li> 
<li><input type="checkbox" name="q8[]" value="Comedy"><label for="checkgenre[]">Comedy</label></li> 
<li><input type="checkbox" name="q8[]" value="Animation"><label for="checkgenre[]">Animation</label></li> 
<li><input type="checkbox" name="q8[]" value="Drama"><label for="checkgenre[]">Drama</label></li> 
<li><input type="checkbox" name="q8[]" value="Romance"><label for="checkgenre[]">Romance</label></li> 
    //Continued the same for OTHER CHECKBOXES 

</div> 
</fieldset> 

    //html for other questions... 

<input class="mainForm" type="submit" name="continue" value="Save and Continue" /> 

</form> 

<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, 
     }, 
     q12: { 
      required: true, 
     } 

    }, 

     errorPlacement: function(error, element) { 

     if (element.attr("type") == "radio") { 
     error.insertBefore(element); 
     } else { 
     error.insertBefore(element); 

    } 
    } 

}); 
}); 
</script> 

Может кто-то пожалуйста, помогите мне, если это возможно, чтобы устранить эту проблему или показывает ошибку сообщение (для всех типов ввода) прямо рядом с вопросом? (Я имею в виду точно такую ​​же линию, как вопрос, после *) ??

Благодаря

+0

Вы не должны помещать '