Обозначить заполненный input

Question

Ниже приведен код, в котором заполненные input подсвечиваются зеленой полосой. Но при вводе в один input начинают подсвечиваться и остальные. Как сделать так, что бы подсвечивался только заполненный input?

$('.pay_line').change(function() {
  tmpval = $(this).val();
  if (tmpval == '') {
    $('.pay_line_a').removeClass('class1');
  } else {
    $('.pay_line_a').addClass('class1');
  }
});

.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input,
input.pay_input:focus {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a.class1 {
  border-bottom: 1px solid #008F00;
}

.pay_line_a {
  border-bottom: 1px solid #E3E3E3;
}

:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

</div>

Answer 1

$(this).next('.pay_line_a')
От текущего элемента, с которым произошло событие $(this) найти следующим элементом .pay_line_a

$('.pay_line').change(function() {
  const tmpval = $(this).val();
  const line = $(this).next('.pay_line_a');
  if (tmpval === '') {
    line.removeClass('active');
  } else {
    line.addClass('active');
  }
});

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:focus {
  outline: none;
}

.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a.active {
  border-bottom-color: #008F00;
}

.pay_line_a {
  border-bottom: 1px solid #E3E3E3;
  transition: border-color 0.2s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

</div>

Чуть анимашек:

$('.pay_line').change(function() {
  const tmpval = $(this).val();
  const line = $(this).next('.pay_line_a');
  if (tmpval === '') {
    line.removeClass('active');
  } else {
    line.addClass('active');
  }
});

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:focus {
  outline: none;
}

.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a {
  position: relative;
}

.pay_line_a::before,
.pay_line_a::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: transform;
}

.pay_line_a::before {
  background-color: #E3E3E3;
}

.pay_line_a::after {
  transform-origin: left;
  background-color: #008F00;
  transform: scaleX(0);
}

.pay_line_a.active::after {
  transform: scaleX(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

</div>

Answer 2

сделал на чистом js, на jQuery не умею

const payLine = document.querySelectorAll('.pay_line');

payLine.forEach(element=>{
  element.addEventListener('change', ()=>{
    const value = element.value
    if(value == '') {
      element.parentElement.querySelector('.pay_line_a').classList.remove('class1')
    } else {
      element.parentElement.querySelector('.pay_line_a').classList.add('class1')
    }
  })
})

.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

input.pay_input,
input.pay_input:focus {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

input.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_line_a.class1 {
  border-bottom: 1px solid #008F00;
}

.pay_line_a {
  border-bottom: 1px solid #E3E3E3;
}

:focus {
  outline: none;
}

<a href="https://jquery.com/" class="existing">jQuery</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input pay_line" type="text" name="" placeholder="John">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input pay_line" type="text" name="" placeholder="Doe">
    <div class="pay_line_a" for="pay_line"></div>

  </div>

Answer 3

Можно обойтись без дополнительных блоков для бордера.
И атрибут for предназначен для тега label который ссылается по id нужного инпута, в твоем случае он ни чего не делает.

$('.pay_input').change(function() {
  let $this = $(this),
      tmpval = $this.val();
      
  if (tmpval == '') {
    $this.removeClass('class1');
  } else {
    $this.addClass('class1');
  }
});

.pay_blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pay_block_two {
  width: 47.7%;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.pay_input {
  display: block;
  width: 100%;
  margin-top: 15px;
  border: none;
  border-bottom: 1px solid #E3E3E3;
  line-height: 30px;
  color: #515151;
  font-family: inherit;
}

.pay_input.class1 {
  border-bottom: 1px solid #008F00;
}

.pay_input::placeholder {
  color: #C6C6C6;
}

.pay_input:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="pay_blocks">

  <div class="pay_block_two">

    First name *

    <input class="pay_input" type="text" name="" placeholder="John">
  </div>

  <div class="pay_block_two">

    Last name *

    <input class="pay_input" type="text" name="" placeholder="Doe">
  </div>

</div>

БЛОГ НА HUSL

Обозначить заполненный input

Ответы (3 шт):