Скрипт проверки 2 полей ввода - jQuery / Скрипты / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS, PHP

Язык: Русский

Вес файла: 1.0 Kb

Уникальный ID: 6284

Количество символов:

Посмотрели: 268 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/62/6284.html

Прикреплён файл №2: /stuff/0-0-0-6284-20

Скачали бесплатно: 6 раз

Прокомментировали: 0 раз

Рейтинг: 3.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: проверка ввода, сниппет, сравнение ввода, скрипт проверки, Скрипт, bootstrap 5

Поделился: BootstrapТема

Добавлено: 2024-05-28 в 13:24

Метка: 1716891888

⇄ ⇅

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<style>
body{
font: italic 1.2em "Fira Sans", serif;
}
</style>

<form>
 <div class="mb-3">
 <label for="tel1" class="form-label">&#1042;&#1072;&#1096;&#32;&#1090;&#1077;&#1083;&#1077;&#1092;&#1086;&#1085;</label>
 <input type="text" class="form-control" id="tel1">
 <div class="form-text">&#1044;&#1083;&#1103;&#32;&#1087;&#1088;&#1086;&#1074;&#1077;&#1088;&#1082;&#1080;&#32;&#1074;&#1074;&#1086;&#1076;&#1072;&#32;&#1085;&#1086;&#1084;&#1077;&#1088;&#1072;&#32;&#1090;&#1077;&#1083;&#1077;&#1092;&#1086;&#1085;&#1072;&#32;&#1074;&#1074;&#1077;&#1076;&#1080;&#1090;&#1077;&#32;&#1085;&#1086;&#1084;&#1077;&#1088;&#32;&#1074;&#32;&#1086;&#1073;&#1072;&#32;&#1087;&#1086;&#1083;&#1103;.</div>
 </div>
 <div class="mb-3">
 <label for="tel2" class="form-label">&#1058;&#1077;&#1083;&#1077;&#1092;&#1086;&#1085;&#32;&#1077;&#1097;&#1105;&#32;&#1088;&#1072;&#1079;</label>
 <input type="text" class="form-control" id="tel2">
 </div>
 <button type="submit" class="btn btn-primary">&#1054;&#1090;&#1087;&#1088;&#1072;&#1074;&#1080;&#1090;&#1100;</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
 $(function() {
 $('[type="submit"]').attr('disabled',true); // форма загружена, отключаем кнопку "отправить"
 $(document).on('keyup','#tel2',function(){ // #tel2 - ID второго поля
 var tel = $('#tel1'); // ID первого поля
 if($(this).val().trim().replace(/\s+/g, '') == tel.val().trim().replace(/\s+/g, '')){ // удаляем все проблемы до ввода номера и пробелы между цифрами
 $('[type="submit"]').attr('disabled',false); // номера совпадают, делаем кнопку "отправить" активной
 }else{
 $('[type="submit"]').attr('disabled',true); // номера не совпадают, деактивируем кнопку "отправить"
 }
 });
 });
</script>