0 / 0 / 0
Регистрация: 09.08.2021
Сообщений: 37
1

Сделать кнопку "Log in" активной, только если в поля username и password введены строки не меньше 6

02.09.2021, 14:05. Показов 5245. Ответов 1

Author24 — интернет-сервис помощи студентам
На странице есть верстка:

PHP/HTML
1
2
3
4
5
6
7
8
9
<form>
 
  <input type="text" name="username" />
 
  <input type="text" name="password" />
 
  <input type="submit" value="Log in" disabled />
 
</form>
Указания:

Использовать событие "change" или "keyup" для отслеживания длины строк.
Событие change срабатывает у элемента input, когда пользователь меняет в нем текст, а затем меняет фокус на другой элемент (например, кликнуть куда-то вне страницы, или перемещается на другой input.
Событие keyup срабатывает у элемента input всякий раз когда пользователь нажимает и затем отпускает кнопку на клавиатуре при вводе текста в это текстовое поле.
Пример:
Javascript
1
2
3
4
const el = document.querySelector('input[name="username"]');
el.addEventListener('keyup', () => {
 console.log('some key was pressed and released');
});
Активность элемента изменять через свойство элемента disabled. Чтобы элемент перестал быть активным, устанавливаете его true. Чтобы вновь стал активным - обратно в false.
Javascript
1
2
3
const el = document.querySelector('button');
el.disabled = true; // элемент "выключится"
el.disabled = false; // вновь "включится"
Обязательно нужно использовать событие submit для формы. Нельзя использовать событие click по кнопке "Log in". При этом вам надо будет использовать preventDefault, чтобы страница не перезагружалась.
0
Лучшие ответы (1)
02.09.2021, 14:05
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
02.09.2021, 14:05
Ответы с готовыми решениями:

Не могу понять как сделать кнопку Log In, активной, т.е при заполнении минимум 6 символов?
Есть такая вот верстка: При отправке формы (нажатии Enter или кнопки Log in) нужно отобразить alert со введенными данными и не...

Как сделать кнопку активной только при определенных условиях
Добрый день. Есть форма на которой 3 текстбокса и одна кнопка. Я делаю ее Enabled = False. Как сделать условие - если все тексбоксы...

Как сделать не активной Кнопку.Формы, если в самой Форме записи отсутствуют
Здравствуйте, подскажите пожалуйста как настроить кнопки Открытия_Форм не активными, при условии что в самой форме нет записей, а если...

1
Эксперт JS
6496 / 3906 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
05.09.2021, 14:49 2
Лучший ответ Сообщение было отмечено amr-now как решение

Решение

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <input type="text" name="username" />
        <input type="text" name="password" />
        <input type="submit" value="Log in" disabled />
    </form>
    <script>
        const form = document.forms[0],
            btn = form.lastElementChild;
 
        form.addEventListener("change", form_change);
        form.addEventListener("submit", form_submit);
 
        function form_change() {
            btn.disabled = form.username.value.length < 6
                || form.password.value.length < 6;
        }
        function form_submit(event) {
            event.preventDefault();
 
        }
    </script>
</body>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
05.09.2021, 14:49
Помогаю со студенческими работами здесь

Сделать кнопку активной либо неактивной в зависимости от того, все ли обязательные поля заполнены. В чём ошибка?
Всем привет. Помогите разобраться, в чём ошибка? У меня есть форма обратной связи с обязательными полями. Я на JS проверяю, ввели ли...

Inno Setup Как сделать радио кнопку Radiobutton не активной или активной
Всем привет, подскажите кто знает, как сделать радио кнопку в зависимости от условия активной или деактивировать. Создано окно и...

Как сделать функцию в шаблонном классе активной только если T будет определённым классом?
Есть шаблонный класс-контейнер, в нём должны храниться объекты (причём по значению). В нём есть несколько функций сортировок этих...

Как сделать кнопку неактивной, если LineEdit пустой, и активной когда в LineEdit введен текст?
Всем привет! Столкнулся с такой ситуацией: в окне есть виджет LineEdit и кнопка. Я хочу чтобы при пустом LineEdit кнопка была...

Если введены неправильные символы, то деактивировать кнопку
По задумке, если введены неправильные символы, то кнопка должна быть деативированна, но она работает постоянно. Помогите найти ошибку ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Опции темы

Новые блоги и статьи
Система безопасности в Laravel: возможности и примеры
Wired 18.02.2025
Каждый день появляются новые виды атак и уязвимостей, которые могут поставить под угрозу конфиденциальные данные пользователей и функционирование всей системы. В этом контексте выбор надежного. . .
Давайте сравним Django и Laravel
Wired 18.02.2025
Django и Laravel - два мощных инструмента, которые часто сравнивают между собой. Оба фреймворка предлагают разработчикам богатый набор возможностей для создания масштабируемых веб-приложений, но. . .
Laravel или React - что лучше?
Wired 18.02.2025
В разработке веб выбор правильного инструмента часто определяет успех всего проекта. Особенно интересным представляется сравнение Laravel и React - двух популярных технологий, которые часто. . .
Laravel 11: новые возможности, гайд по обновлению
Wired 18.02.2025
Laravel 11 - это новая масштабная версия одного из самых популярных PHP-фреймворков, выпущенная в марте 2024 года. Эта версия продолжает традицию внедрения передовых технологий и методологий. . .
Миграции в Laravel
Wired 18.02.2025
Разработка веб-приложений на Laravel неразрывно связана с управлением структурой базы данных. При работе над проектом часто возникает необходимость вносить изменения в схему базы данных - добавлять. . .
Аутентификация в Laravel
Wired 18.02.2025
В современном мире веб-разработки безопасность пользовательских данных становится критически важным аспектом любого приложения. Laravel, как один из самых популярных PHP-фреймворков, предоставляет. . .
Laravel или Symfony: что лучше для старта?
Wired 18.02.2025
В веб-разработке выбор правильного фреймворка может стать определяющим фактором успеха проекта. Особенно это актуально для PHP - одного из самых распространенных языков программирования, где Laravel. . .
Что нового в Laravel 12
Wired 18.02.2025
С момента своего появления в 2011 году Laravel постоянно развивается, внедряя инновационные решения и совершенствуя существующие возможности. В начале 2025 года ожидается выход Laravel 12 - новой. . .
Роутер в Laravel: как работать с маршрутами
Wired 18.02.2025
Маршрутизация - один из основополагающих элементов любого веб-приложения на Laravel, определяющий как приложение отвечает на HTTP-запросы к различным URL-адресам. По сути, роутинг - это механизм. . .
Интеграция шаблона Bootstrap в Laravel PHP
Wired 18.02.2025
Разработка веб-приложений в современном мире требует не только надежного бэкенда, но и привлекательного, отзывчивого интерфейса. Laravel, как один из самых популярных PHP-фреймворков, отлично. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru