inputmask isComplete all class

172

19 апреля 2022, 15:40

Подскажите пожалуйста, как я могу сделать проверку на заполненость всех полей которые имеют одинаковый класс с помощью плагина inputmask? Сейчас проверка идет только по первому полю.

$(document).ready(function() {
  $(".phone").inputmask("+38 (999) 999-99-99");
});
function check_validate() {
  if ($(".phone").inputmask("isComplete")) {
    console.log("validate = ok");
  } else {
    console.log("validate = no");
  }
}

button {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js" integrity="sha256-O4r2M4p1dxfVFgKvwK23D1RQdTU8ABlIBir9aGP+KJY=" crossorigin="anonymous"></script>
<input type="text" class="phone">
<input type="text" class="phone">
<input type="text" class="phone">
<button onclick="check_validate();">Validate</button>

Answer 1

$(document).ready(function() {
  $(".phone").inputmask("+38 (999) 999-99-99");
});
function check_validate() {
  let bCheck = "validate = ok";
  $(".phone").each(function(i) {
    if (!$(this).inputmask("isComplete")) {
      bCheck = "validate = no";
      $(this).addClass("invalid");
      this.onanimationend = () => {
        $(this).removeClass("invalid");
      };
    }
  });
  console.log(bCheck);
}

button { display: block; }
.invalid { animation: 3s invalid; }
@keyframes invalid {
  25% { box-shadow: 0 0 10px red; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js" integrity="sha256-O4r2M4p1dxfVFgKvwK23D1RQdTU8ABlIBir9aGP+KJY=" crossorigin="anonymous"></script>
<input type="text" class="phone">
<input type="text" class="phone">
<input type="text" class="phone">
<button onclick="check_validate();">Validate</button>