Приветствую.
Есть код:
<form id="test-form">
<input type="radio" name="radio-button" value="Радио номер 1"> Радио 1
<input type="radio" name="radio-button" value="Радио номер 2"> Радио 2
<input type="radio" name="radio-button" value="Радио номер 3"> Радио 3
<input class="i-sum" type="number" name="sum" id="sum">Сумма
<input class="i-date" type="date" name="date" id="date">Дата
<input type="submit" value="Обработать">
</form>
<script>
const form = document.querySelector('#test-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
let r1 = this.querySelector('[name="radio-button"]:checked');
if (r1) {
r1 = r1.value
} else {
alert ('Выберите радио');
// Остановка выполнения скрипта
};
let s1 = this["sum"].value;
if (s1==0) {
alert ('Введите сумму');
// Остановка выполнения скрипта
};
let d1 = this["date"].value;
if (d1==0) {
alert ('Введите дату');
// Остановка выполнения скрипта
};
console.log (r1, s1, d1);
});
</script>
Задача: вывести в консоль значения переменных r1, s1, d1 только в том случае, если все поля формы заполнены. Если хотя бы одно поле не заполнено, то выводится alert и выполнение скрипта останавливается.