Jqueryのチェックボックスとラベルの間に検証エラーが表示される

Question

jquery validationでエラーが表示されます。チェックボックスとラベルの間にエラーが表示されます。エラーが表示されます。

Htmlの

<input type="checkbox" name="standard_subject[]" value="IX" ><span class="checkboxtext">IX</span> 
<input type="checkbox" name="standard_subject[]" value="X" ><span class="checkboxtext ">X</span> 
<input type="checkbox" name="standard_subject[]" value="Maths"><span class="checkboxtext">Maths</span> 
<input type="checkbox" name="standard_subject[]" value="Science"><span class="checkboxtext">Science</span> 
<input type="submit" value="Download now" name="submit" > 

Answer 1

jqueryの検証JSのエラー配置の "errorPlacement" イベントを使用してください。詳細については、下記のスニペットをご確認ください。 `JS`コードです

$('form').validate({ 
 
    rules: { 
 
    "standard_subject[]": { 
 
     required: true, 
 
     minlength: 1 
 
    } 
 
    }, 
 
    messages: { 
 
    "standard_subject[]": "Please select standard." 
 
    }, 
 
    errorPlacement: function(label, element) { 
 
    label.addClass('errorMsq'); 
 
    element.parent().append(label); 
 
    }, 
 
}); 
 
$('button').click(function() { 
 
    $('form').valid(); 
 
});

.errorMsq { 
 
    color: red; 
 
    display: block; 
 
}

<form> 
 
    <div> 
 
    <input type="checkbox" name="standard_subject[]" value="IX" ><span class="checkboxtext">IX</span> 
 
    <input type="checkbox" name="standard_subject[]" value="X" ><span class="checkboxtext ">X</span> 
 
    <input type="checkbox" name="standard_subject[]" value="Maths"><span class="checkboxtext">Maths</span> 
 
    <input type="checkbox" name="standard_subject[]" value="Science"><span class="checkboxtext">Science</span> 
 
    </div> 
 
    <br> 
 
    <input type="submit" value="Download now" name="submit" > 
 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>