Как сделать проверку email в bootstrap 4?

Question

[Александр Бабий]

Всем привет!
Как сделать проверку email (валидацию) в Bootstrap 4?
HTML 5 выводит сообщение в всплывающей подсказке если использовать паттерн например, но надо это сообщение вывести в поле ошибки, поскольку в bootstrap эта подсказка видна только при наведении и пользователю непонятно что не так.
Как её вывести?
Спасибо

Answer 1

[bkosun]

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

https://getbootstrap.com/docs/4.0/components/forms...

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

https://developer.mozilla.org/en-US/docs/Web/HTML/...

Если Вы хотите добавить собственный обработчик - используйте Constraint validation

https://stackoverflow.com/questions/24391078/how-t...
https://developer.mozilla.org/en-US/docs/Web/Guide...
https://www.html5rocks.com/en/tutorials/forms/cons...

Более простой способ, использовать готовые валидаторы, например, JQuery-validation:

https://jqueryvalidation.org/files/demo/bootstrap/...

Comments

[Александр Бабий]

Спасибо большое!
Буду формировать свой JS

[bkosun]

Александр Бабий, не за что ;)

Answer 2

[Виктор Таран]

Батенька, так вы напишите правильно
хочу валидатор, тогда получите
например
bootstrapvalidator.votintsev.ru/getting-started
https://formvalidation.io
А вообще это не совсем бутстрап, посколкьу вам нужно ее делать или на php при хите или на js, так что пойдет любой

Comments

[Александр Бабий]

это хорошие решения для валидации.
Но ещё раз повторюсь - можно ли вывести всплывающую подсказку валидации HTML5 в какой нибудь элемент div например (в предусмотренный bootstrap-ом для вывода ошибки например)

[Виктор Таран]

оно ?
mydefile.ru

[Александр Бабий]

вот это всплывающее сообщение надо вывести через JQuery в какое-нибудь поле

[Виктор Таран]

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

[Александр Бабий]

Виктор Таран, плагин выводит Ваше сообщение о неверной валидации.
На скрине - стандартное сообщение браузера. Причём в разных браузерах оно по-разному выводится. И может иметь сообщение что не так в Вашем воде.
Мне нужно : вывести стандартное сообщение браузера о валидации, но в своё поле.

Answer 3

[Andrey Lebedev]

Указать pattern для input. Например: pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"