Валидация input в bootstrap?

Question

[Xapu3ma]

Подскажите, где реализована функция валидации email в bootstrap?
Вот к примеру сайт, http://bootstrap-4.ru/docs/4.0/components/forms/.

При нажатии кнопки submit выходит всплывающее окно как на скрине. Где это реализуется?
Хочу сделать такое для телефонного номера и имени.
п.с. про валидацию на php и js знаю, но я хочу сделать именно так же и найти с помощью чего это реализованно тут.

Answer 1

[Andrew]

<input type="email">
Во время сабмита, по-дефолту проверяет(и выводит сообщение), если неправильно введёно мыло(#@#.#) и введены символы.

Comments

[Xapu3ma]

где это реализованно? как сделать так же для своего типа input? Например type="name" и делать проверки имени и наподобие.

[Andrew]

Xapu3ma, просто в форме напишите
<input type="email">
Это проверка перед сабмитом.
Для такого "оформления" ничего не надо добавлять.

[Xapu3ma]

Andrew, вы меня не понимаете.

как сделать так же для своего типа input? Например type="name" и делать проверки имени и наподобие.

[Andrew]

Xapu3ma, что значит также?
required даст проверку на заполненность.
Если нужны дополнительные проверки(маска телефона, правильность имени) юзайте валидации, которые вы знаете.

[Xapu3ma]

что значит также?

Это значит чтобы выводился такой же алерт как с <input type="email"> , но только например для проверки телефонного номера. Вопрос и был в том, КАКИМ МЕТОДОМ РЕАЛИЗОВАНО ЭТО : <input type="email"> . <input type="email"> - ЭТО НЕ МЕТОД, А ТИП ПОЛЯ. А МНЕ НУЖЕН МЕТОД!

[Юрий]

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

[Юрий]

Xapu3ma, нет никаких методов

[Miloud]

Xapu3ma,
Используя pattern можно свою валидацию сделать.
Здесь документация что к чему
htmlbook.ru/html/input/pattern
Пример проверки номера:

<form>
    <p>Введите телефон в формате +7-xxx-xxx-xx-xx, где вместо x должна быть цифра:</p>
    <p><input type="tel" pattern="\+7\-[0-9]{3}\-[0-9]{3}\-[0-9]{2}\-[0-9]{2}"></p>
    <p><input type="submit" value="Отправить"></p>
</form>

Делал себе в обычном формате, 0993640356

<input type="tel" pattern="[0-9]{10,11}" placeholder="В формате, 0993640356">