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

       

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

    Swift: как использовать флаги PREPROCESSOR (например, `#if DEBUG`) для реализации ключей API?

    Как найти драйверы, нарушающие применение цифровой подписи в Windows 7 64bit

    Отключить перезапуск после запроса на обновление для сервера 2008 R2

    Навигация и пользовательский макет

    Можно ли использовать одну и ту же папку для Dropbox и SkyDrive?

    Преимущества и недостатки #define против констант?

    Определите, работает ли Python внутри virtualenv

    Будет ли мой USB-накопитель быстрее умирать, если я буду смотреть фильмы прямо из него?

    Заменить новую строку в TSQL

    Знак C ++ как устаревший

    Почему значение, принимающее функции члена setter, не рекомендуется в разговоре с CppCon 2014 Herb Sutter (Back to Basics: Modern C ++ Style)?

    Получить имя активного пользователя в скрипте в Mac OS

    Двойная загрузка Linux и Windows 8 на ноутбуке ASUS (установлена ​​Windows 8)

    Как создать список фреймов данных?

    Аналоги технологий и фреймворков Java и .NET

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