Удаление класса JS после заполнения поля

369
08 января 2017, 19:09

Как удалить класс у другого элемента, после того как было заполнен input или textarea?

Т.е. есть:

<input class="data" type="text" value="" placeholder="Тест 1">
<input class="data" type="text" value="" placeholder="Тест 2">
<input class="data" type="text" value="" placeholder="Тест 3">

И:

<a href="#test" class="test no_valide">Тест</a>

После того как заполнены все input у ссылки необходимо удалить класс no_valide.

Answer 1

На чистом javascript -

const inputAll = Array.from(document.body.querySelectorAll('.required-field')); 
const link = document.body.querySelector('.some-link'); 
 
inputAll.forEach(item => item.addEventListener('input', requiredField_inputHandler)); 
 
 
function requiredField_inputHandler(){ 
  if( isInputIsNotEmptyAllValid(inputAll) ){ 
    link.classList.remove('not-validate'); 
  }else{ 
    link.classList.add('not-validate'); 
  } 
} 
 
function isInputIsNotEmptyAllValid( inputAll ){ 
  let length = inputAll.length; 
   
  while(length--){ 
    let input = inputAll[length]; 
     
    if( ! input.value ){ 
      return false; 
    } 
  } 
   
  return true; 
}
.not-validate { 
  color: red; 
}
<input type="text" class="required-field"> 
<input type="text" class="required-field"> 
<input type="text" class="required-field"> 
<a href="#" class="some-link not-validate">some link</a>

Answer 2

JSFiddle - https://jsfiddle.net/9uuhve7g/

Добавь к каждому полю id, чтобы можно было определить когда заполнены именно все.

$( ".data" ).change(function() {
if ($('#1').val() != '' && $('#2').val() != '' && $('#3').val() != '') {
  $(".test").removeClass('no_valide');
 }
});
Answer 3

Ищет во всех инпутах, если не пустое поле, то удалить класс из id test

$(":input").each(function() {
   if($(this).val() != "")
    ('#test').removeClass('no_valide');
});
READ ALSO
Callback функция в плагине JQuery

Callback функция в плагине JQuery

Пытаюсь сделать плагин для JqueryВот его максимально упрощенная версия:

413
Упростить код JS (jquery)

Упростить код JS (jquery)

Как сократить скрипт?

361
Баг flexbox и абсолютного позиционирования в Firefox

Баг flexbox и абсолютного позиционирования в Firefox

Собственно, вот скриншот проблемыСверху в низ: 1 - Chrome, 2 - Opera, 3 - Firefox, 4 - Edge

444