Возможно ли добавить псевдо класс :valid к input полю через js?

Question

[CcJn]

Есть функция, которая проверяет на валидность введённые данные из поля, можно ли добавить псевдо класс :valid этому полю через JavaScript?

Comments

[Ivan Ustûžanin]

курить куда-то в сторону setCustomValidity(), но сам таким не занимался

Answer 1

[sergski]

Это же css, зачем?) Вам нужно только чтобы результат работы функции не противоречил заданным для поля значениям атрибутов, что логично и несложно.

Comments

[CcJn]

Валидация данных кастомная, нужно чтобы input менял свои стили, через classList можно - но там дублирование стилей

[sergski]

CcJn, Почему? Например, ваша функция возвращает после валидации true или false, соответственно вы по условию с помощью classList.add / classList.remove добавляете/удаляете имя селектора в класс поля и получаете соответствующее ему оформление из css файла.

[CcJn]

sergski, тогда нужно писать дополнительно для всех input это, а у меня выборочно, аля класс для взаимодействия

[sergski]

CcJn, Допустим, у вас есть обычные input: <input class="input-field"> и валидируемые: <input class="input-field input-field__valid"> Дописываем в css

.input-field__valid, .input-field__valid_error, .input-field__valid_ok

и меняем field__valid на input-field__valid_error или input-field__valid_ok в вашем js

[CcJn]

sergski, да только вот проблема в том что я пишу библиотеку, в которой как раз есть валидация, а что бы пользователь специально добавлял класс - не приоритет

Извиняюсь что не уточнил сразу

Answer 2

[Alexandroppolus]

псевдоклассы можно активировать при наличии какого-то класса.

в таблице стилей делаешь

.used-p-c:valid {
    ....
}

и теперь достаточно добавлять/убирать класс "used-p-c" для элемента.

более того, такой класс можно вешать на парента, тогда в css использовать селектор ".used-p-c input:valid" или ".used-p-c > input:valid", чтобы включать/выключать сразу для нескольких элементов

Comments

[CcJn]

Это же нужно будет дублировать список стилей для класса? Ибо у меня стоит Валид для input тега