<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1 class="text-center mt-2 mb-3"><a href="http://bootstraptema.ru/stuff/snippets_bootstrap/form/html5_form_validation_bootstrap/30-1-0-2724" target="_blank">HTML5 Form Validation Bootstrap with pattern matching, with custom inline error message</a></h1> <form> <div class="form-row"> <div class="col"> <input type="text" class="form-control" pattern="[а-яА-Яa-zA-Z0-9_-]{4,12}" autofocus required title="Введите от 4 до 12 символов" placeholder="RU/EN sumbols"> </div> <div class="col"> <input type="submit" class="btn btn-primary" value="Проверить"> </div> </div> </form> </div>

.form-control[type=text]:valid { color: green } .form-control[type=text]:invalid { color: red }