Why does the validator give an error when everything is correct?

Question

JavaScript

Hello everyone
. This question: I have a form on the site with a phone number, message, email and name
The form is not sent, because the phone is always wrong, I can not understand why.
And so, html:

<div class="input-wrap f_left">
            <input type="text" name="number" class="number" placeholder="Телефон">
          </div>

Connected standard validator and mask.
validator:

rules: {
      'number': {
        required: true,
        characters: true
      }
    }
    //Specify the validation error messages
    messages: {
      'number': {
        required: "Введите номер",
        characters: "Введите номер"
      }
    }

Well, the mask:

$('.number').mask("[phone]");

When I fill out the form, it doesn’t visually give an error, it doesn’t write in red, but there is an error in the inspector (a label with an error appears, aria-invalid="true"aria-required="true"

I would be grateful for advice