дисплей сообщения об ошибке проверки значения по умолчанию переопределения jQuery (CSS) Всплывающее окно/Подсказка как

Я использую jQuery BeautyTips , чтобы добиться эффекта маленького пузыря, о котором вы говорите. Я не использую плагин Validation, поэтому особо не могу помочь, но его очень легко стилизовать и показать BeautyTips. Вы должны это изучить. Боюсь, что это не так просто, как правила CSS, поскольку вам нужно использовать элемент холста и включить дополнительный файл javascript, чтобы IE мог с ним хорошо поиграть.

Несколько вещей:

Во-первых, я не думаю, что вам действительно нужна ошибка валидации для набора полей радио, потому что вы можете просто проверить одно из полей по умолчанию. Большинство людей скорее исправят что-то, чем что-то предоставят. Например:

   Age: (*) 12 - 18 | () 19 - 30 | 31 - 50 

, скорее всего, будет изменен на правильный ответ, поскольку человек НЕ хочет, чтобы он возвращался к ответу по умолчанию. Если они видят его пустым, они с большей вероятностью подумают «не ваше дело» и пропустят его.

Во-вторых, я смог получить эффект, который, как мне кажется, вы хотите, без каких-либо свойств позиционирования. Вы просто добавляете padding-right к форме (или div формы, что угодно), чтобы предоставить достаточно места для вашей ошибки и убедиться, что ваша ошибка уместится в этой области. Затем у вас есть предварительно настроенный класс css под названием «error», и вы устанавливаете его как имеющий отрицательную верхнюю границу поля, примерно равную высоте вашего поля ввода, и маржу слева примерно на расстоянии от левого края до того места, где находится ваш правый отступ. должен начаться. Я пробовал это, не очень хорошо, но он работает с тремя свойствами и не требует никаких чисел с плавающей запятой или абсолютных значений:

   <style type="text/css">
    .error {
        width: 13em; /* Ensures that the div won't exceed right padding of form */
        margin-top: -1.5em;  /*Moves the div up to the same level as input */
        margin-left: 11em;   /*Moves div to the right */
        font-size: .9em;     /*Makes sure that the error div is smaller than input */
    }

   <form>
   <label for="name">Name:</label><input id="name" type="textbox" />
   <div class="error"><<< This field is required!</div>
   <label for="numb">Phone:</label><input id="numb" type="textbox" />
   <div class="error"><<< This field is required!</div>
   </form>

Если бы вы могли объяснить причину, по которой вам нужно заменить метку на div, это, безусловно, поможет ...

Кроме того, не могли бы вы вставить образец, который был бы полезно ( http://dpaste.com/ или http://pastebin.com/ )

К сожалению, я не могу комментировать свою репутацию новичка, но у меня есть решение проблемы с гасанием экрана или, по крайней мере, это то, что сработало для меня. Вместо того, чтобы устанавливать класс оболочки внутри функции errorPlacement, установите его сразу после установки типа оболочки.

$('#myForm').validate({
    errorElement: "div",
    wrapper: "div class=\"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() + 5);
        error.css('top', offset.top - 3);
    }

});

Я предполагаю, что это позволит валидатору узнать, какие элементы div нужно удалить, а не все. Сработало для меня, но я не совсем уверен, почему, так что если кто-то может уточнить, это может помочь другим.

Этот ответ действительно помог мне, в моем случае мне пришлось отфильтровать некоторые элементы и указать специальное значение для их ошибочного div,

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}