Как провалидировать селекты?

Question

[olenafront097]

в зависимости от выбора радио

выбрали У отделение

если без выбора в селекте
и кликаем далее - то показываем текст с ошибкой под селектом (типа сделайте выбор)

выбрали на почту
если без выбора в селекте
кликаем далее - показываем текст с ошибкой под селектом (типа сделайте выбор)

https://jsfiddle.net/kruqfcv0/5/

Answer 1

[lexchz]

Например,

let places = document.querySelectorAll('input[name="place"]');
let selects = document.querySelectorAll(".city__select");
let error = '<label class="error">This field is required.</label>';

places.forEach((place, i) =>
  place.checked && !selects[i]?.value
    ? selects[i]?.insertAdjacentHTML("afterend", error)
    : void 0
);

Comments

[olenafront097]

lexchz, ошибку выдает
https://jsfiddle.net/ow54rc9m/

[lexchz]

olenafront097, я так понял, на jsfiddle не работает оператор ?. (Optional chaining). Здесь он нужен для предотвращения ошибки из-за возможного отстутствия элемента.

Вот так работает: https://jsfiddle.net/9mkxz3rb/ Только повесь этот код на сабмит формы, сейчас он сразу исполняется.

[olenafront097]

lexchz, так у вас валидируется всё время только первый блок
а не в зависимости от радиокнопки

[lexchz]

olenafront097, потому что код исполняется сразу. Окончательный, рабочий вариант

(function formActions() {
	const form = document.querySelector('form[name="test"]');
	if (!form) return;

	form.onsubmit = function(e) {
		e.preventDefault();
		return validateSelects(this);
	};
})()


function validateSelects(form) {
	let places = form.querySelectorAll('input[name="place"]');
	let selects = form.querySelectorAll('.city__select');

	form.querySelectorAll(".error").forEach((l) => l.remove());

	places.forEach((place, i) => place.checked && selects[i] && !selects[i].value
	? selects[i].insertAdjacentHTML('afterend','<span class="error">This field is required.</span>')
	: void 0		
	);
}