В JavaScript невозможно напрямую добавлять или изменять псевдоклассы, такие как `:valid`, к элементам. Псевдоклассы управляются браузером на основе состояния элемента. Однако вы можете управлять состоянием элемента так, чтобы псевдокласс `:valid` применялся.
Для этого вы можете использовать свойства HTML-элемента и его методы. Например, вы можете задать атрибуты `required`, `minlength`, `pattern`, и т.д., а также проверять валидность введённых данных с помощью JavaScript и манипулировать значением поля `input`.
Вот пример, как это можно сделать:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
</style>
<title>Пример :valid</title>
</head>
<body>
<form id="myForm">
<label for="myInput">Введите текст:</label>
<input type="text" id="myInput" required>
<button type="submit">Отправить</button>
</form>
<script>
const input = document.getElementById('myInput');
input.addEventListener('input', function () {
// Пример проверки валидности
if (this.value.length >= 3) {
this.setCustomValidity(''); // Удаляем сообщение об ошибке
} else {
this.setCustomValidity('Введите минимум 3 символа'); // Установим сообщение об ошибке
}
});
document.getElementById('myForm').addEventListener('submit', function (e) {
e.preventDefault(); // предотвращаем отправку формы для демонстрации
if (input.validity.valid) {
alert('Форма корректна!');
} else {
alert('Форма некорректна!');
}
});
</script>
</body>
</html>
```
В этом примере:
- Поле ввода имеет атрибут `required` и CSS-правила для псевдоклассов `:valid` и `:invalid`.
- Когда пользователь вводит данные, срабатывает событие `input`, где с помощью `setCustomValidity` проверяется, корректно ли введено значение.
- Если значение валидное, устанавливается пустое значение для `setCustomValidity`, что говорит браузеру, что ошибки нет, и псевдокласс `:valid` применяется.
- Если значение не валидное, устанавливается сообщение об ошибке, и применяется псевдокласс `:invalid`.
Таким образом, валидность поля управляется через JavaScript, а визуальное представление изменяется с использованием CSS и псевдоклассов.