Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2021, 12:26
Новичок на форуме
Отправить личное сообщение для Tolik89 Посмотреть профиль Найти все сообщения от Tolik89
 
Регистрация: 22.08.2021
Сообщений: 4

Подсветка ошибки ввода
Помогите решить задачу в JS.
Есть текстовое поле. Вы вводите туда числа. Если число выходит за пределы диапазона 10-50, то поля должны выделяться красной рамкой (красным бордером)

При вводе корректного числа - рамка должна исчезать.

<input type='number' />

.input {
margin: 20px;
}

.error-value {
border: red 1px solid;
}
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2021, 13:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Tolik89,
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:valid</title>
  <style>
   input:invalid {
    background: #fdd; /* Красный цвет фона */
   }
   input:valid {
    background: #dfd; /* Зеленый цвет фона */
   }
  </style>
 </head>
 <body>
  <form>
   <p>10-50</p>
   <p><input type='number'  class="input" max="50" min="10" required/>
</p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2021, 13:42
Новичок на форуме
Отправить личное сообщение для Tolik89 Посмотреть профиль Найти все сообщения от Tolik89
 
Регистрация: 22.08.2021
Сообщений: 4

Спасибо, но мне нужно именно в javascript сделать так, чтобы подсвечивалось если ввод не соответствует
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2021, 15:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Tolik89
о именно в javascript

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:valid</title>
  <style>
   input.invalid {
    background: #fdd; /* Красный цвет фона */
   }

  </style>
  <script>
  document.addEventListener( "DOMContentLoaded" , function() {
  document.querySelector(".input").addEventListener("input", function() {
  this.classList.toggle("invalid", !this.validity.valid);
  })
    });
  </script>
 </head>
 <body>
  <form>
   <p>10-50</p>
   <p><input type='number'  class="input invalid" max="50" min="10" required/>
</p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 22.08.2021, 21:33
Новичок на форуме
Отправить личное сообщение для Tolik89 Посмотреть профиль Найти все сообщения от Tolik89
 
Регистрация: 22.08.2021
Сообщений: 4

мне нужно что бы я мог ввести любое число, но границы(border) должны стать красными если это не число от 10 до 50, и если надо добавлять что то в html то это должно делаться через js. Спасибо за ответы
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2021, 08:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Tolik89
должны стать красными
исправьте строку 8 согласно своим вкусам
Ответить с цитированием
  #7 (permalink)  
Старый 23.08.2021, 21:12
Новичок на форуме
Отправить личное сообщение для Tolik89 Посмотреть профиль Найти все сообщения от Tolik89
 
Регистрация: 22.08.2021
Сообщений: 4

Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Достать текст ошибки из консоли sledge Общие вопросы Javascript 2 15.05.2020 17:57
Сортировка массива с объектами на javascript sergiu920 Элементы интерфейса 2 07.12.2018 09:47
Создание страницы с полем ввода и кнопкой Nikson87 Элементы интерфейса 5 23.07.2014 11:43
генерация и логирование ошибки Hapson Общие вопросы Javascript 31 03.04.2014 17:20
Переход между окнами ввода при заполнении. Бушка Общие вопросы Javascript 4 25.03.2009 15:40