Вы можете использовать опцию errorPlacement , чтобы переопределить отображение сообщения об ошибке небольшим css. Потому что одного CSS недостаточно для получения необходимого эффекта.
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div",
wrapper: "div", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top);
}
});
});
Вы можете поиграть с атрибутами left и top css, чтобы отобразить сообщение об ошибке в верхней, левой, правой или нижней части элемента.
Например, чтобы показать ошибку сверху:
errorPlacement: function(error, element) {
element.before(error);
offset = element.offset();
error.css('left', offset.left);
error.css('top', offset.top - element.outerHeight());
}
И так далее. Вы можете обратиться к документации jQuery о css для получения дополнительных опций.
Вот CSS, который я использовал. Результат выглядит точно так, как вы хотите. С как можно меньшим количеством CSS:
div.message{
background: transparent url(msg_arrow.gif) no-repeat scroll left center;
padding-left: 7px;
}
div.error{
background-color:#F3E6E6;
border-color: #924949;
border-style: solid solid solid none;
border-width: 2px;
padding: 5px;
}
А вот фоновое изображение, которое вам нужно:
(источник: scriptiny.com )
Если вы хотите, чтобы сообщение об ошибке отображалось после группы параметров или полей. Затем сгруппируйте все эти элементы внутри одного контейнера в «div» или «fieldset». Например, добавьте специальный класс для всех групп. И добавьте следующее в начало функции errorPlacement:
errorPlacement: function(error, element) {
if (element.hasClass('group')){
element = element.parent();
}
...// continue as previously explained
Если вы хотите обрабатывать только определенные случаи, вы можете использовать attr:
if (element.attr('type') == 'radio'){
element = element.parent();
}
Этого должно быть достаточно для отображения сообщения об ошибке рядом с родительским элементом.
Возможно, вам придется изменить ширину родительского элемента, чтобы она была меньше 100%.
Я попробовал твой код, и он прекрасно работает для меня. Вот предварительный просмотр:
Я только что сделал очень маленькую настройку для заполнения сообщения, чтобы оно поместилось в строке:
div.error {
padding: 2px 5px;
}
Вы можете изменить эти числа, чтобы увеличить / уменьшить отступ сверху / снизу или влево / вправо. Вы также можете добавить высоту и ширину к сообщению об ошибке. Если у вас все еще есть проблемы, попробуйте заменить span на div
<div class="group">
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</div>
А затем дайте контейнеру ширину (это очень важно)
div.group {
width: 50px; /* or any other value */
}
О пустой странице. Как я уже сказал, я попробовал ваш код, и он работает для меня. Это может быть что-то другое в вашем коде, который вызывает проблему.