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

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

Пример # 1 (Dojo) – должен ввести неверный ввод, чтобы увидеть отображение ошибок
Пример №2

Вот пример кода, который переопределяет метку ошибки в элементе div

$(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div" }); }); 

Теперь я теряю часть css, но вот она:

 div.error { position:absolute; margin-top:-21px; margin-left:150px; border:2px solid #C0C097; background-color:#fff; color:white; padding:3px; text-align:left; z-index:1; color:#333333; font:100% arial,helvetica,clean,sans-serif; font-size:15px; font-weight:bold; } 

ОБНОВИТЬ:

Хорошо, я использую этот код сейчас, но изображение и место размещения во всплывающем окне больше, чем граница, можно ли настроить динамику по высоте?

 if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') { element = element.parent(); 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 - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox } else { // Error placement for single elements 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 - (element.height() / 2)); } 

css такой же, как ниже (ваш код css)

Html

       

    7 Solutions collect form web for “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); } }); }); 

    Вы можете играть с атрибутами 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». Добавьте, например, специальный class во все их группы. И добавьте следующее к началу функции 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%.


    Я пробовал свой код, и он работает отлично для меня. Вот предварительный просмотр: alt text

    Я просто сделал небольшую корректировку для дополнения сообщения, чтобы он вписывался в строку:

     div.error { padding: 2px 5px; } 

    Вы можете изменить эти числа, чтобы увеличить / уменьшить отступы сверху / снизу или влево / вправо. Вы также можете добавить высоту и ширину к сообщению об ошибке. Если у вас все еще есть проблемы, попробуйте заменить span на div

     

    А затем дайте контейнеру ширину (это очень важно)

     div.group { width: 50px; /* or any other value */ } 

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

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

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

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

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

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

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

       

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

    Interesting Posts

    Последовательность всех целых чисел между двумя векторами в R

    Веб-приложение заблокировано при обработке другого веб-приложения при совместном использовании одного сеанса

    Поиск в Windows 7 не работает в папке Google Диска

    Сделать Omnibar Chrome более похожим на Firefox AwesomeBar

    Как установить NODE_ENV = производство в Windows?

    Создание Android-сервиса с помощью Phonegap? (У вас есть приложение для телефонного звонка, даже если оно закрыто)

    Как вы записываете Skype-беседу в Windows?

    Получение ssh для выполнения команды в фоновом режиме на целевой машине

    Как равномерно распределить скорость модема dsl?

    Миниатюры панели задач Windows 7 не отображаются

    Карта Java со значениями, ограниченными параметром типа ключа

    Разница между classами драйвера Oracle jdbc?

    Firebase и индексирование / поиск

    Ошибка C #: родительский элемент не содержит конструктор, который принимает 0 аргументов

    Переопределение Rails default_scope

    Давайте будем гением компьютера.