Форум

Tolik89 · #1 (**permalink**) 22.08.2021, 12:26

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

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

<input type='number' />

.input {
margin: 20px;
}

.error-value {
border: red 1px solid;
}

рони · #2 (**permalink**) 22.08.2021, 13:02

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>

Tolik89 · #3 (**permalink**) 22.08.2021, 13:42

Спасибо, но мне нужно именно в javascript сделать так, чтобы подсвечивалось если ввод не соответствует

рони · #4 (**permalink**) 22.08.2021, 15:19

Сообщение от 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>

Tolik89 · #5 (**permalink**) 22.08.2021, 21:33

мне нужно что бы я мог ввести любое число, но границы(border) должны стать красными если это не число от 10 до 50, и если надо добавлять что то в html то это должно делаться через js. Спасибо за ответы

рони · #6 (**permalink**) 23.08.2021, 08:21

Сообщение от Tolik89

должны стать красными

исправьте строку 8 согласно своим вкусам

Tolik89 · #7 (**permalink**) 23.08.2021, 21:12

Спасибо

Форум

Справочник

Discord чат

Курсы javascript