javascript - 空输入的 JS 验证指示器

Question

我需要它，以便如果.edit :input启用，.indicator接收addClass('animate' ); 仅当输入 为空时。

如果 .edit :input 被diasbaled，则每个 .indicator 都会收到 removeClass('animate');然后消失。

我已经很接近了，但是在点击几次 .edit-toggle 并在 input 中添加和删除文本后，.animate 似乎在没有任何指示的情况下添加/删除自身。

$(".edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);
$('.edit-toggle').on('change', function() {
    var idInput = $(this).data('input');
    var inputEle = $('.' + idInput);
    var indicator = inputEle.next();
    if ($(this).is(":checked")) {
      inputEle.attr("disabled", true);
    } else {
      if (inputEle.val() == '' && inputEle.prop('required')) {
        indicator.addClass('animate');
      } else {
        indicator.removeClass('animate');
      }
      inputEle.removeAttr("disabled");
    }
  }

);
$(".edit :input").on('keyup', function() {
    var $this = $(this);
    var $indicator = $('.indicator', $this.parent());
    if ($this.val() == '' && $this.prop('required')) {
      $indicator.addClass('animate');
    } else {
      $indicator.removeClass('animate');
    }
  }

);

.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item2">
  <label class="edit-icon" for="edit-toggle2">
  <input id="edit-toggle2" data-input="edit-input2" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input2" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
  <div class="edit block">
    <input class="edit-input2" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
</div>
<div class="item3">
  <label class="edit-icon" for="edit-toggle3">
  <input id="edit-toggle3" data-input="edit-input3" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input3" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
  <div class="edit block">
    <input class="edit-input3" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
  <div class="edit block">
    <input class="edit-input3" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
</div>

Answer 1

因为input和.indicator是列表，所以需要使用.each来到达数组中的所有元素

$(".edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);
$('.edit-toggle').on('change', function() {
    var idInput = $(this).data('input');
    var inputEle = $('.' + idInput);
    var toggleInput = $(this);
    inputEle.each(function() {
      var indicator = $(this).next();
      if (toggleInput.is(":checked")) {
        $(this).attr("disabled", true);
      } else {
        if ($(this).val() == '' && $(this).prop('required')) {
          indicator.addClass('animate');
        } else {
          indicator.removeClass('animate');
        }
        $(this).removeAttr("disabled");
      }
    })
    
  }

);
$(".edit :input").on('keyup', function() {
    var $this = $(this);
    var $indicator = $('.indicator', $this.parent());
    if ($this.val() == '' && $this.prop('required')) {
      $indicator.addClass('animate');
    } else {
      $indicator.removeClass('animate');
    }
  }

);

.edit-icon i {
  color: white;
  padding: 10px;
  border-radius: 50%;
}

.edit-icon input[type="checkbox"],
.edit-icon .checked {
  display: none;
  background: blue;
}

.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
  background: green;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.checked {
  display: inline-block;
  -webkit-animation: bounceUp 0.5s forwards;
  animation: bounceUp 0.5s forwards;
}

.edit-icon input[type="checkbox"]:checked~.unchecked {
  display: none;
}

.block {
  display: flex;
  align-items: center;
}

.indicator {
  transform: scale(0);
  transition: transform 250ms;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.indicator.animate {
  transform: scale(1);
}

@-webkit-keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bounceUp {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item2">
  <label class="edit-icon" for="edit-toggle2">
  <input id="edit-toggle2" data-input="edit-input2" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input2" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
  <div class="edit block">
    <input class="edit-input2" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
</div>
<div class="item3">
  <label class="edit-icon" for="edit-toggle3">
  <input id="edit-toggle3" data-input="edit-input3" class="edit-toggle" type="checkbox" name="toggle"/>
    <i class="fa fa-check-circle unchecked"></i>
    <i class="fa fa-pencil checked"></i>
  </label>
  <div class="edit block">
    <input class="edit-input3" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
  <div class="edit block">
    <input class="edit-input3" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
  <div class="edit block">
    <input class="edit-input3" type="text" name="name" autocomplete="off" value="" required/>
    <div class="indicator"></div>
  </div>
</div>