Валидация и проверка input на ввод символов

Question

Есть код, который не допускает ввод символов, за исключением кириллицы, пробелов и тире, но он не отрабатывает когда пользователь вставляет (paste) значение. После того как пользователь вставляет значение в поле оно должно быть отредактировано по следующим правилам:

Из строки значения должны удаляться все символы, кроме допустимых.
Пробелы и дефисы в начале и конце значения должны удаляться.
Несколько идущих подряд пробелов или дефисов должны заменяться на один.
Первая буква должна приводиться к верхнему регистру, а все остальные к нижнему.

Подскажите как можно реализовать такое поведение

$('input').on('keypress', function() {
  var that = this;

  setTimeout(function() {
    var res = /[^А-Яа-яЁё -]/g.exec(that.value);
    console.log(res);
    that.value = that.value.replace(res, '');
  }, 0);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <script src="script.js" defer></script>
  <title>Document</title>
</head>

<body>

  <div class="container">
    <form action="">
      <h3>Фамилия</h3>
      <input type='text' id='surname'>
      <h3>Имя</h3>
      <input type='text' id='name'>
      <h3>Отчество</h3>
      <input type='text' id='middle'><br>
      <br>
      <button class="btn btn-success">Отправить</button>
    </form>
  </div>

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

</html>

Answer 1

document.querySelector('.test').addEventListener('input', function() {
  this.value = this.value.replace(/[^А-Яа-яЁё -]/g, '');
})

<input type="text" class="test">

БЛОГ НА HUSL

Валидация и проверка input на ввод символов

Ответы (1 шт):