Lỗi plugin Xác thực jQueryVui lòng chọn hộp kiểm

Question

Tôi sử dụng plugin Xác thực jQuery để xác thực biểu mẫu của tôi. Vấn đề của tôi là vị trí của thông báo lỗi cho hộp kiểm. xin vui lòng xem hình ảnh này:

Đây là một phần html liên quan đến hộp kiểm + 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> 

Ai đó có thể vui lòng giúp đỡ tôi nếu có thể khắc phục vấn đề này hoặc hiển thị các lỗi tin nhắn (cho tất cả các loại đầu vào) ngay bên cạnh câu hỏi? (Tôi có nghĩa là chính xác cùng một dòng như câu hỏi, sau khi *) ??

Cảm ơn

Answer 1

Tôi đã thêm một class đến label cho câu hỏi của bạn để tìm ra rằng dễ dàng hơn ...

<label class="question">What are your favourite genres of movies?<span>*</span></label> 

Sau đó, bạn chỉ cần thực hành các kỹ thuật "DOM traversal" của bạn. Nghiên cứu các phương pháp here.

• $(element).parents('div') tìm div container của element của bạn.

• Sau đó, .prev($('.question')) đưa bạn đến số .question là người anh em trước đây đầu tiên của số div này.

Đặt tất cả lại với nhau và chèn thông báo lỗi ngay sau câu hỏi.

error.insertAfter($(element).parents('div').prev($('.question'))) 

Trong errorPlacement:

errorPlacement: function (error, element) { 
    if (element.attr("type") == "checkbox") { 
     error.insertAfter($(element).parents('div').prev($('.question'))); 
    } else { 
     // something else if it's not a checkbox 
    } 
} 

DEMO: http://jsfiddle.net/sgsvtd6y/

Có lẽ bạn không cần có điều kiện, vì kỹ thuật mà nên làm việc trên tất cả các loại input của bạn.

errorPlacement: function (error, element) { 
    error.insertAfter($(element).parents('div').prev($('.question'))); 
} 

Nếu không, nếu HTML của bạn khác, bạn có thể sử dụng điều kiện với chuyển đổi DOM được sửa đổi hơi.