Jquery validation перекрывает чекнутый checkbox, что делать?

Question

[CrystalClear]

Есть код валидации формы:

$("#js-register-form").validate({
       rules: {
           form_email:{
               required: true,
               email: true
           },
           form_phone:{
               required: true,
           },
           form_check:{
               required: true
           }
       },
        submitHandler: function(form){
            $.ajax({
                url: "mail.php",
                type: "POST",
                data: $(form).serializeArray(),
                success: function (response) {
                    form.reset();
                    $.fancybox.open("#reg-success");
                }
            })
        }

вот разметка

<form class="intro-reg-form" id="js-register-form">
                                <div class="form-header">
                                    <h1>ЗАРЕГИСТРИРУЙСЯ  СЕЙЧАС <br>
                                        <span>И УЧАСТВУЙ В РОЗЫГРЫШЕ</span>
                                    </h1>
                                    <div class="bonus"><img src="img/group-21.png"></div>
                                </div>
                            <div class="form-body">
                                <input type="email" placeholder="Email" class="email" name="form_email" id="form-email">
                                <input type="number" placeholder="Телефон" class="cellphone" name="form_phone" id="form-phone">
                                <input type="checkbox" id="accept" name="form_check" ><label for="accept" class="accept" >Согласие на сбор и обработку личных данных</label>
                                <div class="footer-form">
                                <input type="submit" class="submit-button button"  value="Зарегистрироваться">
                                </div>
                            </div>
                            </form>

У input'а checkbox есть label с псевдоклассом before, который отображает стилизированный чекбокс и after который стилизирует его в состоянии checked.
Проблема в том, что после отработки validate() в состоянии checked псевдоклас after не работает.

вот стили этих элементов

.reg-col form .accept::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #dbdbdb;
    background-color: #f3f3f3;
    border-radius: 2px;
}


.reg-col form #accept:checked + label::after{
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background-color: #f8c51c;
    border-radius: 2px;
}

Answer 1

[hakkol]

У вас все ломает новый label от jquery validation. Есть метод errorPlacement в jquery validation, в котором вы можете указать, куда поместить элемент с ошибкой, например так:

errorPlacement: function (error, element) {
    if (element.attr("type") == "checkbox") {
        return element.next('label').append(error);
    }

     error.insertAfter($(element));
}

Comments

[CrystalClear]

Спасибо, помогло)