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

Question

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

Я использую 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"}
            }
        });

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

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

Answer 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") );
        }
    });

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

Answer 2

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

jQuery (function () {

// Проведите валидацию! Укажите элемент переноса, добавьте стиль, класс и вставьте сообщение об ошибке после элемента с идентификатором

$('#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'
    }
});

}); * 1 028 *