validating the length of phone field

I have several phone fields on my web page like this:

$("#HomePhoneInput").inputmask({
  "mask": "(999) 999-9999"
});
$("#WorkPhoneInput").inputmask({
  "mask": "(999) 999-9999"
});
$("#CellPhoneInput").inputmask({
  "mask": "(999) 999-9999"
});
<input type="text" asp-for="HomePhone" id="HomePhoneInput" placeholder="(___) ___-____" />
<input type="text" asp-for="CellPhone" id="CellPhoneInput" placeholder="(___) ___-____" />
<input type="text" asp-for="WorkPhone" id="WorkPhoneInput" placeholder="(___) ___-____" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

I’m using this library to mask the fields.

I want to put the restriction on the length of the phone fields. If the user keys in less than 10 characters then as soon as the user tabs out of the phone field, an error message is displayed underneath the field saying “Phone field needs to be 10 character long.” This is what I tried:

<input type="text" asp-for="HomePhone" id="HomePhoneInput" placeholder="(___) ___-____" minlength="10" maxlength="10" data-msg="Phone field needs to be 10 character long."  />

Above does not work on chrome browser.

This is something, I want when the user tabs out of the phone field:

enter image description here