I have a form with a phone mask, but I can’t make a red `borderColor` when all the phone numbers are not filled and green when everything is correct.

[![enter image description here](https://i.stack.imgur.com/NYtyr.png)](https://i.stack.imgur.com/NYtyr.png)

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/jquery@3.2.1/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput@1.4.1/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;
  outline: none;
}

```

JS

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

function checkNum() {

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

}

```

Help me please, thanks!