Pull to refresh

Сообщение об ошибках. Мой вариант.

Website development *
Недавно захотелось мне сделать, что бы на моем проекте ошибки отображались именно там, где они были совершены. Т.е. если вы не верно ввели e-mail, то и ошибка должна отображаться именно рядом с «инпутом» для ввода e-mail’а. Так в чем проблема? Писать прям под этим «инпутом» и все. Нет! А если не хватает места? Вот именно такая ситуация возникла у меня, в некоторых местах «впендюрить» ошибку просто некуда из-за отсутствия места для нее.

В связи с этим, мы понимаем, что нужно использовать подобие JavaScript’ового «алерта». Знаю, «алерт» — это не кошерно. Поэтому необходим выскакивающий-плавающий «див», причем привязанный в месту престпуления совершения ошибки.

Поискав немного среди плагинов для «jQuery» я не нашел ничего путного. Либо я плохо искал, либо действительно ничего подходящего нет. Поэтому прошу взглянуть на мой вариант:



Сама функция:
function showError(e, message) {
  if (message.length < 1) {
    return false;
  }
  eOffset = $(e).offset();
  eBox  = $('#error_Box').clone();
  eBoxId = $(e).attr('id') + '_Error';
  $(eBox).attr({ id: eBoxId });
  $(eBox).css({ top: eOffset.top + 13, left: eOffset.left + 25, display: '' }).text(message).prependTo('body');
  $(eBox).bind('click', function() {
    $(this).remove();
  });
}


* This source code was highlighted with Source Code Highlighter.


Всплывающий «див»:
<div id="error_Box" class="error_Box" style="display: none;"></div>

* This source code was highlighted with Source Code Highlighter.


В функцию передается «e» — объект (DOM элемент) к которому будет привязана ошибка, и «message» — сообщение об ошибке, которое будет отображено пользователю.

В свою очередь функция определяет местоположение (координаты) объекта, клонирует уже существующий «див» и привязывает его (визуально) к месту происшествия.

Вот результат работы этой функции:
image

При клике на ошибку «див» уничтожается.

P.S. Мои знания JavaScript, хватают лишь на то, что бы побаловаться. Поэтому любая конструктивная критика приветствуется.
Tags:
Hubs:
Total votes 38: ↑24 and ↓14 +10
Views 178
Comments Comments 69