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

Ответ 1

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

И вот вам фоновое изображение:

alt text http://sandbox.scriptiny.com/messages/images/msg_arrow.gif

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

   <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>

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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