Подсветка ошибки ввода
Помогите решить задачу в JS.
Есть текстовое поле. Вы вводите туда числа. Если число выходит за пределы диапазона 10-50, то поля должны выделяться красной рамкой (красным бордером) При вводе корректного числа - рамка должна исчезать. <input type='number' /> .input { margin: 20px; } .error-value { border: red 1px solid; } |
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>
|
Спасибо, но мне нужно именно в 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>
|
мне нужно что бы я мог ввести любое число, но границы(border) должны стать красными если это не число от 10 до 50, и если надо добавлять что то в html то это должно делаться через js. Спасибо за ответы
|
Цитата:
|
Спасибо
|
| Часовой пояс GMT +3, время: 13:03. |