Почему не происходит проверка valid при использовании focus в CSS?

CSS не обладает способностью проверять валидность данных формы. Стили в CSS можно применять на основе состояния валидности, которые предоставляются браузером для элементов формы (:valid, :invalid, :required, :optional, :in-range, :out-of-range и другие). Например, можно стилизовать элемент формы, который содержит валидную информацию, используя селектор `:valid`, и использовать селектор `:invalid` для невалидных данных.

Вот пример такого CSS:

```css
input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}
```

Теперь, чтобы создать веб-форму с классом "reg-form", вам нужно написать HTML-код. Ниже приведён базовый пример веб-формы с несколькими полями ввода:

```html
<form class="reg-form" action="/submit_form" method="post">
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" required minlength="6">
  
  <button type="submit">Зарегистрироваться</button>
</form>
```

Обратите внимание, что здесь используются атрибуты, такие как `required` и `minlength`, которые помогут браузеру выполнять базовые проверки ввода до отправки формы. Валидация на стороне сервера все равно обязательна для обработки данных формы безопасным способом после их отправки.

Если вы хотите создать стили для вашей формы, добавьте соответствующие CSS правила. Например:

```css
.reg-form {
  /* Стили для формы */
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

.reg-form label {
  /* Стили для меток */
  display: block;
  margin-bottom: 5px;
}

.reg-form input[type="text"],
.reg-form input[type="email"],
.reg-form input[type="password"] {
  /* Стили для текстовых полей ввода */
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
}

.reg-form button {
  /* Стили для кнопки отправки формы */
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.reg-form button:hover {
  background-color: #0056b3;
}
```

Этот код создаст базовую стилизацию для вашей формы.

добавь аттрибут require для инпута