It is necessary to validate the input on the template, ie:

  <input name="reg-name-n" type="text" class="form-control" placeholder="Ім'я" pattern="^[А-ЯІЇ][а-яії]{2,9}" title="Від 3 до 10 символів. Перша велика." required>

And if there are no problems with input or entered by pattern , then add this input to the class="has-success" using .keyup() .

And if I have for example three different pattern'a , then how to simplify the code?

    1 answer 1

    It is possible to order much easier, for example, to use the selector: valid.

     input[type="text"]:valid { border: 1px solid green; }

    If all the conditions are met, simply use the style for a valid input.