javascript pole wyboru

javascript pole wyboru
Patryk Kulig
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 4 lata
  • Postów:8
0

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

Kopiuj
function validateRadio(radio) {
    return true;
}
Kopiuj
<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>

screenshot-20201216192848.png

edytowany 1x, ostatnio: ŁF
katakrowa
  • Rejestracja:ponad 10 lat
  • Ostatnio:około 2 lata
  • Lokalizacja:Chorzów
  • Postów:1670
1

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


Projektowanie i programowanie. Hobbystycznie elektronika i audio oszołom.
edytowany 2x, ostatnio: katakrowa
Patryk Kulig
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 4 lata
  • Postów:8
0

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

screen.png

JA
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 dni
  • Postów:134
0

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

Patryk Kulig
  • Rejestracja:ponad 4 lata
  • Ostatnio:prawie 4 lata
  • Postów:8
0

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

Kopiuj
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
}
edytowany 1x, ostatnio: ŁF
ŁF
Co to jest radio? Jaki jest sens porównania radio > 0?
RG
  • Rejestracja:około 5 lat
  • Ostatnio:około 16 godzin
  • Lokalizacja:Sardine, Italy
  • Postów:187
0

@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

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.