Как проверить и обернуть сообщение об ошибке вокруг ввода?

Плагин jQuery Validate автоматически создает и переключает элемент сообщения об ошибке.

1. Вы можете указать тип элемента, например div, label и т. д., используя параметр errorElement. По умолчанию label.

2. Вы можете указать размещение этого элемента сообщения об ошибке, например, до, после, внутри родителя и т. д., используя различные методы jQuery внутри вариант errorPlacement. По умолчанию "после" элемента input.

Однако вы не можете легко обернуть элемент сообщения об ошибке вокруг элемента input. Хотя для этого можно использовать jQuery с параметром errorPlacement, проблема возникает, когда ошибку необходимо устранить. Плагин автоматически удалит/скроет элемент сообщения об ошибке, когда сообщение необходимо очистить, и ваш элемент input будет удален/спрятан вместе с ним.

Решением будет создание внешнего div самостоятельно и использование highlight и unhighlight, чтобы переключить класс ошибки на этом внешнем div. Вам нужно будет не забыть также включить код по умолчанию в highlight и unhighlight, иначе поведение по умолчанию будет нарушено. Поскольку желаемый класс является классом ошибок по умолчанию, вы можете просто использовать аргумент errorClass в параметрах highlight и unhighlight.

Ваш HTML:

<div>
   <input type="text" name="name" value="" />
</div>

Ваш метод .validate():

$('#yourForm').validate({
    // rules and options,
    errorPlacement: function(error, element) {
        error.insertBefore(element);
    },
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass); // <- default behavior
        $(element).parent('div').addClass(errorClass); // <- add error class to your parent div
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass); // <- default behavior
        $(element).parent('div').removeClass(errorClass); // <- remove error class from your parent div
    }
});

Конечный результат в DOM при ошибке проверки:

<div class="error">
   <label id="name-error" class="error" for="name">This field is required.</label>
   <input type="text" name="name" value="" />
</div>

Вы должны поиграть с обработчиком highlight, который позволяет вам определить способ пометить ввод как недействительный:

jQuery.validator.setDefaults({
    highlight: function(element, error, valid){
        $(element).parent("div").addClass(error); 
        // or do whatever you want
    }
});

обратите внимание, что есть еще один обработчик с именем unhighlight, который также должен быть реализован, но противоположным образом. Вот вам пример:

unhighlight: function(element, error, valid){
    $(element).parent("div").removeClass(error); 
    // or do whatever you want but in opposite way
}

Полное решение вашей проблемы должно выглядеть так:

jQuery.validator.setDefaults({
    highlight: function(element, error, valid){
        $(element).parent("div").addClass(error); 
    },
    unhighlight: function(element, error, valid){
        $(element).parent("div").removeClass(error); 
    }
});

Обратите внимание, что приведенный выше код должен быть размещен на сайте желательно после вашего jquery.validation.js, потому что он меняет поведение jQuery.validator по умолчанию. Преимущество выполнения этого через jQuery.validator.setDefaults заключается в том, что ваша конфигурация будет применяться к каждой отдельной форме на вашем веб-сайте,