Есть инпут, в который нужно ввести число, если мы вводим букву, выводится сообщение о ошибке! вопрос: как сделать так, что-бы если мы ввели не число, инпут - border был красным цветом? есть класс .error , который отвечает за это, только там border не работает, работает только background! как это исправить???
<html>
<head>
<style>
.wrap {
width: 376px;
margin: 0 auto;
padding: 10px;
border: 1px solid #C6CBD0;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.wrap h1 {
text-align: center;
font: 16px/18px Arial, Tahoma, sans-serif;
color: #7CA6CD;
}
.wrap label {
font: 14px/18px Arial, Tahoma, sans-serif;
color: #555555;
}
.wrap input[type=text] {
width: 140px;
height: 28px;
margin: 0 0 5px 0px;
padding: 4px 5px;
border: 1px solid #C6CBD0;
border-radius: 4px;
font: 14px/18px Arial, Tahoma, sans-serif;
color: #555555;
outline: none;
}
.wrap input[type=text]:focus {
border-color:#56b4ef;
box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
}
.tooltip {
font: 13px/18px Arial, Tahoma, sans-serif;
color: #555555;
}
/*Инпут меняет цвет, если ввели не цифры*/
.error {
background: #B94A48;
}
.error_text {
width: 275px;
font: 13px/18px Arial, Tahoma, sans-serif;
color: #597BA5;
border: 1px solid #DDDDDD;
padding: 5px;
}
</style>
</head>
</html>
<body>
<div class="wrap">
<label>Введите ваш возраст: <input type="text" name="age"/></label>
<div class="tooltip" id="error">Здесь будет ошибка, если вы введёте не число!</div>
<script>
var input = document.getElementsByName('age')[0];
var errorHolder = document.getElementById('error');
input.onblur = function() {
if (isNaN(this.value)) { // введено не число
// показать ошибку
this.className = 'error';
errorHolder.innerHTML = '<div class="error_text">Вы ввели не число. Исправьте, пожалуйста!</div>'
}
}
input.onfocus = function() {
// сбросить состояние "ошибка", если оно есть
if (this.className == 'error') {
this.className = '';
errorHolder.innerHTML = '';
}
}
</script>
</div>
</body>
</html>
