javascript pole wyboru

Witam,

mam zadanie:

W formularzu mam pole wyboru (pole radio). Ma być ono obowiązkowe. W przypadku nie zaznaczenia tego pola brak możliwości zapisania formularza i ma być komunikat: pole radio jest obowiązkowe

function validateRadio(radio) {
    return true;
}

<div class="row">
                <div class="column label-column">
                    <label>Radio</label>
                </div>
                <div class="column input-column">
                    <input type="radio" name="favouriteNumber" value="1"><label class="radio-label">1</label>
                    <input type="radio" name="favouriteNumber" value="2"><label class="radio-label">2</label>
                    <input type="radio" name="favouriteNumber" value="3"><label class="radio-label">3</label>


                </div>
            </div>

Masz zdarzenie <form onsubmit="[tu wywołaj funkcję walidacji formularza]">

https://www.w3schools.com/jsref/event_onsubmit.asp
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit

@katakrowa: ok tylko to nie ma być alert (wyskakujące okienko) tylko informacja pod tekstem. (screen)

Tekst możesz dynamicznie dodawać przy użyciu własności innerHTML.
Zamiast wyświetlania alert(), dodaj tekst pod inputem.

Tutaj masz przykład: innerHTML

@jawlo: napisałem coś takiego czy to jest poprawne?

function validateRadio(radio) {
    const valid = (radio > 0);
    const input = document.querySelector("input[name='favouriteNumber']");
    if (valid) {

        input.className = "";

        const nameMessage = document.getElementById("radio-input-message");
        if (nameMessage) {
            nameMessage.parentElement.removeChild(nameMessage);
        }
    } else {

        input.className = "invalid";
        if (!document.getElementById("radio-input-message")) {
            const small = document.createElement("small");
            small.id = "radio-input-message";
            small.className = "invalid";
            small.innerText = "Zaznacz wymagane pole: 1,2 lub 3";
            input.parentElement.appendChild(small);
        }
    }
    return valid
}

@Patryk Kulig: Dodaj do <input... id tak: <input id="r1" , następny id="r2 itd. w funkcji sprawdzającej odczytaj stan przez
var zmienna1 = getElementById("r1").checked;
var zmienna2 = ...."r2"...;
itd.
Wynik dla wszystkich to np: true false false - pierwszy on
false true false - drugi on
itd

Pozdrawiam
Radosław Głębicki