Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   проверка на заполненость input (https://javascript.ru/forum/misc/66775-proverka-na-zapolnenost-input.html)

skwz 10.01.2017 07:41
проверка на заполненость input
 
Привет!
Помогите написать пару строк кода, пожалуйста.

Есть input имеющий class="test", если поле заполнено, то добавляем class="test green". Если опять пустое, то удаляем класс "green".
Вот в принципе такую простую вещь мне надо, заранее спасибо!

ksa 10.01.2017 08:18
Цитата:
Сообщение от skwz
если поле заполнено, то добавляем class="test green". Если опять пустое, то удаляем класс "green"
Вот тебе статейка...
http://www.khtulhu.org.ua/veb-progra...a-v-input.html

innowed 10.01.2017 09:41
как например такой вариант?
<input id="my_input" class="test">
<script>
    var input = document.getElementById("my_input");
    
    input.addEventListener('input', function(e){
        if(!e.target.classList.contains('green')) {
            e.target.classList.add('green');
        }
        if(!e.target.value) {
            e.target.classList.toggle('green');
        }
    
    });
    input.addEventListener('blur', function(e){
        if(!e.target.value && e.target.classList.contains('green')) {
            e.target.classList.toggle('green');
        }
    });
</script>

рони 10.01.2017 10:03
innowed,
многовато будет :)

skwz 10.01.2017 23:16
Работает, но и без 
<input id="my_input" class="test">
<script>
...
...
input.addEventListener('blur', function(e){
    if(!e.target.value && e.target.classList.contains('green')) {
        e.target.classList.toggle('green');
    }
});
</script>

Для чего он?

рони 11.01.2017 00:02
:-? 

<script>
window.addEventListener('DOMContentLoaded', function() {
   var input = document.querySelector('.test');
    input.addEventListener('input', function(e){
        this.classList[ this.value?'add':'remove']('green');
    });
   });
</script>
  <style type="text/css">
     .green{
        border: 5px solid #008000;
     }

  </style>
<input id="my_input" class="test">

skwz 11.01.2017 20:44
Спасибо, идеально :thanks:

skwz 12.01.2017 03:06
Изначально не так поставил вопрос потому что не додумался что не будет работать несколько input-ов с таким кодом, или для каждого input'а прописывать свой индивидуальный id и применять этот код? или же есть способ проще?

<script>
window.addEventListener('DOMContentLoaded', function() {
   var input = document.querySelector('.test');
    input.addEventListener('input', function(e){
        this.classList[ this.value?'add':'remove']('green');
    });
   });
</script>

<style type="text/css">
   .green{
      border: 5px solid #008000;
   }
</style>

Input1:
<input id="my_input" class="test">

Input2:
<input id="my_input" class="test">

Input3:
<input id="my_input" class="test">

рони 12.01.2017 05:24
skwz,
id уникально!!! не повторимо в нормальном коде, назначать циклом по всем элементам или делегирование.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script>
  window.addEventListener('DOMContentLoaded', function() {
   var form = document.querySelector('form');
    form.addEventListener('input', function(e){
        var el = e.target;
        el.classList.contains('test') && el.classList[ el.value?'add':'remove']('green');
    });
   });
</script>

<style type="text/css">
   .green{
      border: 5px solid #008000;
   }
</style>
</head>

<body>


<form action="http://" >
Input1:
<input class="test">

Input2:
<input  class="test">

Input3:
<input class="test">
</form>

</body>
</html>

laimas 12.01.2017 05:57 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
input:valid {
    background: #E4F6DE;
}

input:invalid {
    background: #FFEBEB;
} 
</style> 
</head>
<body>
<input required="" />
<input required="" /> 
</body>
</html>


Часовой пояс GMT +3, время: 22:39.