Проверка валидации

У меня есть форма с маской телефона, но не получается сделать красный borderColor когда не заполнили все числа телефона и зеленый когда все верно.

HTML

<form id="border1">
     <input type="text" placeholder="Phone number" class="phone_mask">
</form>
    <button id="button" class="form-button" onclick="checkNum(document.querySelector('.phone_mask'))">
        Sign up
    </button>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.maskedinput.js"
    type="text/javascript"></script>

CSS

.phone_mask {
  border: 2px solid #eef0ef;
  border-radius: 3px;
  height: 41px;
  width: 327px;
  margin: 30px 0px 0px 19px;
  padding-left: 12px;
  outline: none;
}

.phone_mask:focus {
  border: 2px solid #bdd9f7;
  border-radius: 2px;
  box-shadow: 0px 0px 2px 3px #bdd9f7;
  height: 41px;
  width: 327px;
  margin: 30px 0px 0px 19px;
  padding-left: 12px;
  outline: none;
}

JS

let phoneBlock = document.querySelector('.phone_mask')
let phone = $(".phone_mask").mask("+7(099)999-99-99");

function checkNum() {

    if (!phone) {
        phoneBlock.style.borderColor = 'red';
    }
    else {
        phoneBlock.style.borderColor = 'green'
    }

}

Помогите пожалуйста