HTML5 Bubble Messages

Question

Существует новый атрибут HTML5 для поля ввода , обязательный для заполнения , который выдает всплывающее сообщение при отправке формы и поле остается пустым. Есть ли способ выскочить один и тот же пузырь с другим текстом? Я хочу использовать его для разных проверок (не только если он пустой или нет).

Вот скриншот этого всплывающего окна в Chrome:

Answer 1

HTML5 предоставляет метод с именем setCustomValidity для достижения именно этого. Этот метод является низкоуровневым API для добавления новых ограничений проверки и добавления новых / изменения сообщений об ошибках. Вы должны вызвать свой скрипт, который удаляет / добавляет сообщение проверки - используя setCustomValidity - (в «DOMready» и) при вводе / изменении.

Я написал скрипт polyfill, который не только реализует эти методы формы HTML5 во всех браузерах, но также добавляет "customValidity" -helper , что упрощает добавление пользовательских ограничений проверки с помощью custom Сообщения.

Примечание. Вам не нужно реализовывать библиотеку webshims, чтобы использовать этот скрипт. Это также работает без webshims lib. (Но если вы используете webshims lib, вы получите проверку ограничений во всех браузерах, включая IE6). Если вы не хотите иметь этот кросс-браузер, просто возьмите только скрипт validity-helper . Документация здесь .

Обратите внимание, что если вы вносите изменения в сообщение, устанавливая пользовательское сообщение, вы должны включить способ очистки сообщения, например

myFormElement.setCustomValidity ( '');

если вы не удалите сообщение, элемент формы будет считаться недействительным и форма не будет отправлена.

Answer 2

Конечно, вы можете checkValidity() на определенных входах, но опять-таки не работает так, как вы бы хотели. Если не считать запрет по умолчанию, если вы все еще хотите отправить форму после завершения проверки, вы все равно можете обработать этот стиль, выполнив следующие действия:

Обратите внимание, что в формах, которые вы не хотите применять проверяющие стили CSS, вы можете просто добавить атрибут novalidate к форме.

HTML:

<form name="login" id="loginForm" method="POST">
    <input type="email" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="LOG IN" class="hero left clearBoth">
</form>

Если вы не используете SCSS, я очень рекомендую изучить его, он гораздо более управляем, прост в написании и менее запутан. Примечание: в примере с скриптом у меня есть точная CSS, которая будет скомпилирована Я также включил пример стиля пузыря.

SCSS:

form:not([novalidate])            {
  input, textarea                 {
    &:required                    {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
    &:required:valid              {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
    &:not(:focus):valid           {box-shadow: none;border: 1px solid $g4;}
    &:focus:invalid               {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center;  @include box-shadow(0 0 5px #d45252); border-color: #b03535}  
  }
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
  &:after {
     @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
  }
  .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}

JAVASCRIPT:

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

var form    = $('form');
var item    = form.find(':invalid').first();
var node    = item.get(0);                       
var pos     = item.position();                
var message = node.validationMessage || 'Invalid value.'; 
var bubble  = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left  + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();        
bubble.insertAfter(item); 

Сообщение будет html5-сообщением по умолчанию, или вы можете переопределить его, передав его в переменную 'message' выше, довольно просто, хью!

DEMO:

http://jsfiddle.net/shannonhochkins/wJkVS/

Наслаждайтесь, и я надеюсь, что помогу другим с проверкой формы HTML5, так как это здорово, и это нужно сделать!

Shannon

Answer 3

Вы можете использовать шаблон Flyweight, в котором вы изолируете

• внешнее состояние : объект всплывающей подсказки, который вы хотите показать (поэтому вы определяете свой объект HTML, стиль CSS и свойства объекта)
• состояние внутреннего контроля , которое отличается для всех ваших пузырьковых объектов и содержит пузырь текст

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

Хороший пример можно найти в Apress "Pro edsign Javascript Patterns" - ch.9 Пример - объект всплывающей подсказки.

Шаблон flyweight особенно полезен, когда ваши объекты JavaScript должны создавать HTML. Наличие большого количества объектов, каждый из которых создает несколько элементов DOM, может быстро увязнуть ваша страница, используя слишком много памяти. Шаблон flyweight позволяет создать только несколько эти объекты и делиться ими во всех местах, где они необходимы. Прекрасный пример этого можно найти во всплывающих подсказках. Подсказка - это всплывающий блок текста, который вы видите, когда наводите курсор на инструмент в настольное приложение. Обычно он дает вам информацию об инструменте, так что пользователь может знать, что он делает, не нажимая на него в первую очередь. Это может быть очень полезно в веб-приложениях, и это довольно легко реализовать в JavaScript.

Answer 4

Из того, что вы упомянули, я думаю, что лучше всего написать функцию javascript для принятия вашего сообщения в качестве параметра.Затем вызовите свой html-пузырь изнутри.