Вывод ошибок в Select2?

Question

[SeriousAnonymous]

Подскажите пожалуйста, как сделать вывод ошибки в Select2 если пользователь не выбрал ничего, а данный селект обязателен?

Попробовал сделать в CSS, но получается как-то костыльно, так как стили ошибки нужно поставлять отдельно к каждой цепочке классов. Есть ли какой-то ещё вариант решения?

.input__error{
background: #FCE3E3;
color: #E63434;
}
.select2-container--default .select2-selection--single.input__error{
background: #FCE3E3;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder.input__error{
color: #E63434;
}

Answer 1

[ForSureN1]

Добавьте к тэгу select атрибут required
Но не забудьте что по умолчанию выбирается первый из списка пункт, для того чтобы выбор был пустым, нужно добавить одно поле с атрибутами selected и disabled
далее на свой вкус можете уже стилизовать ошибку путем .select[required] {}
Да и вообще, такой вопрос уже имеется https://qna.habr.com/q/691269
Перед тем как задавать, погуглили бы для начала

Comments

[SeriousAnonymous]

Вот тут возникает ещё одна проблема.
Select должен иметь вид:

Т.е "Cумма займа" по сути - это placeholder, который при выборе должен смещаться вверх.
Не могу найти логического решения.
Попробовал Ваш вариант, но он не работает или я что-то не так делаю.
Видно, что стили ошибки применяются, но не к Select2, а стандартному select, который можно увидеть при зажатии кнопок обновления страницы.
Могу попросить вас совета, в чем может быть дело или что-то я делаю не верно.
На данный момент удалось сделать следующее:

[ForSureN1]

SeriousAnonymous, Прикрепите код, по другому помочь не в силах, желательно песочницу

[SeriousAnonymous]

ForSureN1,
https://codepen.io/by_ultra/pen/WNOVQqq
Буду очень признателен за помощь в выводе ошибки ввода и поднятия placeholder при выборе option.
Большое спасибо.

[ForSureN1]

SeriousAnonymous, Как вариант, можете сделать кастомный select, то есть не использовать select вообще, сделать input, по клику на него, показывать под ним блок со значениями, при выборе значения просто вставлять в этот input это значение, навряд ли получится нативным способом сделать вашу задачу

[SeriousAnonymous]

ForSureN1,
Понял, спасибо за совет и уделенное время.

[ForSureN1]

SeriousAnonymous, а на счет вывода ошибки, я же объяснил, вам нужно во первых обернуть ваш select в form, далее в select задает атрибут required, и добавляем в самом низу формы input с типом submit, по нажатию на него, он будет проверять все поля с атрибутом required, и если поле будет пустым, будет выдавать ошибку

[SeriousAnonymous]

ForSureN1,
Форма есть и button для отправки формы.
Я просто скинул кусок кода только input. Просто в случае с Select2 ошибку нужно подставлять отдельно каждому элементу т.е placeholder - чтобы изменить цвет текста, фон отдельно и получается полотно кода.
Что мне показалось не корректно и не оценят на беке

.select2-container--default .select2-selection--single.input__error,
.select2-container--default .select2-selection--single .select2-selection__placeholder.input__error{
background: #FCE3E3;
color: #E63434;
}

Что касается поднятия вверх placeholder посоветовали данный плагин:
https://moshfeu.github.io/select2-placeholder-tran...
Но не вышло его реализовать.

[ForSureN1]

SeriousAnonymous, не нужен button, нужен input с атрибутом submit