Показать ошибку проверки jquery ниже элемента

У меня есть два элемента (выпадающих), которые очень тесно расположены. Этим элементам требуются поля.

Я использую jquery valiate для проверки полей. Сообщение об ошибке отображается для обоих элементов, а пространство между элементами увеличивается, поскольку сообщение об ошибке первого элемента управления отображается рядом с элементом

$('#RegisterForm').validate({
        rules: {
            Country:{required: true},
            State:{required: true}
        },
        messages: {
            Country:{required: "Select Country"},
            State:{required: "Select State"}
        }
    });

Я попытался использовать break перед элементами как:

$('#RegisterForm').validate({
            rules: {
                Country:{required: true},
                State:{required: true}
            },
            messages: {
                Country:{required: "<br/>Select Country"},
                State:{required: "<br/>Select State"}
            }
        });

Когда я сделал это, второй элемент переместится к следующей строке.

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

Ответы

Ответ 1

Используйте параметр errorPlacement (см. здесь: http://docs.jquery.com/Plugins/Validation/validate#toptions)

$('#RegisterForm').validate({
        rules: {
            Country:{required: true},
            State:{required: true}
        },
        messages: {
            Country:{required: "Select Country"},
            State:{required: "Select State"}
        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent("td").next("td") );
        }
    });

Конечно, вам придется адаптировать код к вашей ситуации.

Ответ 2

Найден решение с использованием метода InsertAfter() на моей веб-форме aspx:

jQuery (function() {

//Сделайте проверку! Укажите элемент wrap, добавьте стиль, класс и введите сообщение об ошибке после элемента по идентификатору

$('#yourform').validate({
    wrapper: 'span',
      errorPlacement: function (error, element) {
        error.css({ 'color': '#FFA500', 'font-size': '0.750em' });     
        error.addClass("error")
        error.insertAfter($('[id*=element_before_error_message]'));
    }
});

//Применение правил

$('[id * = element_to_validate]'). rules ('add', {

     
   required: true,
   messages: {
   required: '<br />* Some Validation Text'
    }
});
         

});