jQuery переопределить отображение сообщения об ошибке проверки по умолчанию (Css) Всплывающее окно / всплывающая подсказка, например

Вы можете использовать параметр 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);
        }

    });
});

Вы можете поиграть с левым и верхним атрибутами 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». Например, добавьте специальный класс для всех из них 'group'. И добавьте в начало функции 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;
}

Вы можете изменить эти числа, чтобы увеличить / уменьшить отступ сверху / снизу или слева / справа. Вы также можете добавить к сообщению об ошибке высоту и ширину. Если у вас все еще есть проблемы, попробуйте заменить диапазон на 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 */
}

О пустой странице. Как я уже сказал, я попробовал ваш код, и он у меня работает. Возможно, проблема связана с чем-то другим в вашем коде.

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

К сожалению, я не могу прокомментировать свою репутацию новичка, но у меня есть решение проблемы с тем, что экран гаснет, или, по крайней мере, это то, что у меня сработало. Вместо того, чтобы устанавливать класс оболочки внутри функции 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);
    }
}

Добавьте следующий css к вашему методу .validate, чтобы изменить css или функциональность

 errorElement: "div",
    wrapper: "div",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertAfter(element)
        error.css('color','red');
    }

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

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