Sprawdzenie, czy wszystkie pola ankiety (radio, checkbox) zostały wypełnione

pytanie zadane 10 sierpnia 2017 w JavaScript przez Adiks Nowicjusz (240 p.)

Jak w temacie, może ktoś zna rozwiązanie?

Zależy mi na sprawdzeniu (po kliknięciu submit buttona, czy wszystkie pola ( radio, checkbox) w ankiecie zostały wypełnione. Jeżeli są to skrypt ma wysłać dane do bazy, jeżeli nie to wyświetlić alert, w którym pytaniu nie została udzielona odpowiedź.

Przeszukałem internet i znalazłem rozwiązanie, które dostosowałem pod siebie dla input text.

function sprawdzenie()
{  
    var blad=false;
     
    document.getElementById("Formularz").onsubmit = function()  // zostanie wywołana funkcja jesli uzytkownik nacisnie przycisk wyslij
    {
        if(document.getElementById("rok_urodzenia").value == "") //wlasciwosc elementu imie dla mojego obiektu jest pusta
		{     
            alert('Uzupełnij:   41. Rok urodzenia'); 
            blad = true;    // jesli blad przyjmuje wartosc true 
        }
        
        if(blad == true) // funkcja ta sprawdza czy blad jest rowny prawdzie jesli tak to zwroci fałsz
        {
            return false;
        }           
     }
}

Ma ktoś pomysł jak do tego kodu dorobić sprawdzanie dla radio i checkboxów?

3 odpowiedzi

odpowiedź 10 sierpnia 2017 przez Velta Maniak (52,010 p.)

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#The_required_attribute

komentarz 10 sierpnia 2017 przez Adiks Nowicjusz (240 p.)
edycja 10 sierpnia 2017 przez Adiks

Serio dodanie atrybutu required wystarczy? Czy działa to we wszystkich przeglądarkach (również w mobilnych)? Widziałem info o Firefoxie, Operze i Chromie, sprawdziłem na IE, ale co z resztą?

A jak wykorzystać required przy checkboxach, jeżeli chcę, aby można było zaznaczyć co najmniej jeden, a maksymalnie 2 z grupy 10? Ograniczenie do max 2 już w sumie wykonałem, natomiast sprawdzenie, czy cokolwiek jest zaznaczone wiąże się z błędem z wiadomych względów.

komentarz 10 sierpnia 2017 przez Velta Maniak (52,010 p.)

wtedy można wkroczyć już z JS albo sprawdzić na poziomie PHP, jeżeli będzie użyty ;p

odpowiedź 10 sierpnia 2017 przez Gohan Użytkownik (990 p.)

w html required, np:

<form>
    <label for="input1">1:</label><input type="radio" name="test" id="input1" required value="1" /><br />
    <label for="input2">2:</label><input type="radio" name="test" id="input2" value="2" /><br />
    <label for="input3">3:</label><input type="radio" name="test" id="input3" value="3" /><br />
    <input type="submit" value="send">
	</form>

a jak tak koniecznie chcesz pod Twoj kod w JS to na szybko napisałem coś takiego:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	
	<form action="">
		<input type="radio" name="gender" value="man">Man
		<input type="radio" name="gender" value="woman">Woman
		<input type="button" value="send">
	</form>
	
	
	<script>
		
		const button = document.querySelector("input[type='button']");
		
		let blad = true;
		let radio = document.querySelectorAll("input[type='radio']");

		function check() {
			for(let i=0; i<radio.length; i++) {
				if(radio[i].checked) { blad = false; break; }
				else {
					blad = true;
				}
			}
		}
		
		button.addEventListener('click', check);
	
	</script>

</body>
</html>

komentarz 10 sierpnia 2017 przez Adiks Nowicjusz (240 p.)
edycja 10 sierpnia 2017 przez Adiks

komentarz 10 sierpnia 2017 przez Gohan Użytkownik (990 p.)

Polecam do sprawdzania strone caniuse.com jeśli chodzi o atrybuty, akruat required działa.

Jak zastosowac required przy tym co napisałeś to nie wiem, ale napisałem to w JS

sprawdz tutaj czy o taki efekt Ci chodziło: https://codepen.io/anon/pen/XagNob

ew. tutaj wkleje cały kod:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	
	<form action="">
    <input type="checkbox" name="checkbox_">
    <input type="checkbox" name="checkbox_">
    <input type="checkbox" name="checkbox_">
    <input type="checkbox" name="checkbox_">
    <input type="button" value="send">
	</form>
	
	<script>
		
		const button = document.querySelector("input[type='button']");
		
		let blad = true;
		let checkbox = document.querySelectorAll("input[type='checkbox']");

		
		
		let minChecked = 2,
			 maxChecked = 2;
		
		
		function count() {
			let checked = 0;
			for(let i=0; i<checkbox.length; i++) {
				
				if(checkbox[i].checked) {
					checked++;
				}
			}
			return {"checked": checked};
		}
		
		function check() {
			
			count();
			
			if(count().checked>minChecked-1) {
					blad = false;
				} else {
					blad = true;
				}
		}
		
		function maxCheckbox() {
			count();
			if(count().checked >= maxChecked) {
				[].forEach.call(checkbox, function(checkbox){
					if(checkbox.checked === false) {
						checkbox.disabled = true;
					}
					
				});
			}
			
			unBlock();
			
		}
		
		function unBlock() {
			if(count().checked < maxChecked) {
				[].forEach.call(checkbox, function(checkbox){
					if(checkbox.disabled===true) {
						checkbox.disabled=false;
					}
					}
				)
			}
		}
		
		
		
		[].forEach.call(checkbox, function(checkbox){
			checkbox.addEventListener('click', maxCheckbox);
		});

		button.addEventListener('click', check);
	
		
		
		
	</script>

</body>
</html>

komentarz 15 sierpnia 2017 przez Adiks Nowicjusz (240 p.)

Wszystko fajnie, ale czy można zamienić tak, aby document.querySelector działał na zasadnie document.getElementById("9") gdzie 9 to id dla wszystkich checkboxów w danym pytaniu? Próbowałem, niestety nie działa. Twoje rozwiązanie wygląda bardzo fajnie, natomiast niestety przy dwóch lub większej liczbie pytań z checkboxami zlicza wszystkie pytania razem, czyli zaznaczając 2 checkboxy w pierwszym pytaniu, zablokowane są w kolejnych :)

Druga sprawa, jak sprawdzić, czy w każdym z pytań został zaznaczony co najmniej 1 checkbox?

odpowiedź 17 sierpnia 2017 przez Adiks Nowicjusz (240 p.)

Jesteście w stanie podpowiedzieć dlaczego się tak dzieje, że gdy sprawdzam zaznaczenie checkboxów o takim samym id, będących wewnątrz tego samego div'a, to gdy mam tylko jednego checkboxa jest wszystko ok, natomiast gdy dołożę kolejne odpowiedzi, to nie działa?

https://codepen.io/anon/pen/KvZowy

<form name="a" method="post" action="zapisz.html">

<div class="6"> <!-- pytanie nr 6 -->
    <h1>6. Co lubisz jeść?</h1>					
    <input type="checkbox" id="checkagree" value="1"/>Schabowy<br/>
    <input type="checkbox" id="checkagree" value="2"/>Kebab<br/>
    <input type="checkbox" id="checkagree" value="3"/>Frytki
</div>
<input type="submit" value="Submit" onclick="sprawdz();" />
</form>

function sprawdz(){

if(a.checkagree.checked == false)
{
	alert('Wybierz co najmniej 1, maksymalnie 2 dania!');
	return false;
}
return true;
}

Wielkie dzięki za każdą uwagę ;)

Podobne pytania

0 głosów

2 odpowiedzi 602 wizyt

Stylizacja inputów (radio,checkbox itp)

pytanie zadane 11 kwietnia 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)

+1 głos

1 odpowiedź 597 wizyt

Przechwycenie danych z formularza input type=radio za pomocą pętli

pytanie zadane 10 sierpnia 2021 w JavaScript przez El Lirón Obywatel (1,320 p.)

0 głosów

0 odpowiedzi 426 wizyt

[js] Wyświetlanie danych z tablicy lub pustego pola

pytanie zadane 8 lutego 2019 w JavaScript przez niezalogowany

Sprawdzenie, czy wszystkie pola ankiety (radio, checkbox) zostały wypełnione

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci