[JavaScript] Sprawdzanie pól formularza

junior95 · Post autor: **junior95** » 13 gru 2013, o 19:19

Witam, wykonałem dość prosty formularz w HTML, jednak aby wznieść się na trochę inny poziom, chciałbym, aby przez javaskrypt następowało sprawdzanie pół formularza, po wciśnięciu przycisku Wyślij (wyskoczył by alert "Nie wypełniłeś tych pól:..."). Nigdy nie robiłem nic w javie. Mógłby ktoś napisać przykładowy kod dla mojgo formularza dla listy rozwijanej, radio, text, textarea, checkbox. Bardzo proszę:)

Kod: Zaznacz cały

<html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf8" />
	<meta name="Description" content="Formularz kontaktowy " />
<title>Formularz kontaktowy</title>
</head>

<body>
<form name= abc action="mailto:abad@op.pl" method="POST"  onreset="if (!confirm('Czy na pewno chcesz wyczyścić cały formularz?')) return false">
<body bgcolor="silver">
<table border="0" width="60%" align=center bgcolor="#9966ff" cellspacing="0">
<tr >
	<td colspan="2" align=center><font size="6" face="Rage Italic"><u><b>Formularz kontaktowy</b></u></font></td>
</tr>
<tr >
	<td ><font size="3" ><b>Imię</b></font></td>
	<td ><font size="3" ><b>Nazwisko</b></font></td>
</tr>
<tr>
<tr>
	<td><input placeholder="Wpisz imię" type="text" name="imie" size="20" maxlength="12"/></td>
	<td><input type="text" placeholder="Wpisz nazwisko" name="nazwisko" size="25" maxlength="20" required="required"/></td>
</tr>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
<tr>
	<td><font size="3" ><b>Ulica</b></font></td>
	<td><font size="3" ><b>Numer domu</b></font></td>
</tr>
	<td><input type="text" placeholder="Wpisz ulicę" name="ulica" size="20" maxlength="20"/></td>
	<td><input type="text" placeholder="Wpisz numer domu" name="nrdom" size="25" maxlength="5"/></td>
</tr>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
<tr>
	<td><font size="3" ><b>Miejscowość</b></font></td>
	<td><font size="3" ><b>Telefon komórkowy</b></font></td>
</tr>
<tr>
	<td><select name="miejscowosc" >
		<option value=""></option>
		<optgroup label="Miasto">
		<option value="Żnin">Żnin</option>
		<option value="Janowiec Wielkopolski">Janowiec Wlkopolski</option>
		<option value="Szubin">Szubin</option>
		<option value="Bydgoszcz">Bydgoszcz</option>
		<option value="Poznań">Poznań</option>
		<optgroup label="Wieś">
		<option value="Żnin-Wieś">Żnin-Wieś</option>
		<option value="Cerekwica">Cerekwica</option>
		<option value="Słębowo">Słębowo</option>
		<option value="Biskupin">Biskupin</option>
		<option value="Wenecja">Wenecja</option>
		<option value="Gorzyce">Gorzyce</option>
		</select></td>
	<td><input type="text" required="required" name="telefon" size="25" maxlength="9" /></td>
</tr>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
<tr>
	<td><font size="3" ><b>Płeć</b></font></td>
	<td><font size="3" ><b>Ulubiony gatunek muzyczny</b></font></td>
</tr>
<tr>
	<td><input type="radio" name="plec" value="Kobieta" />Kobieta<br>
	<input type="radio" name="plec" value="Mężczyzna" />Mężczyzna</br></td>
	<td><input type="checkbox" name="Muzyka" value="Pop" />Pop<br>
	<input type="checkbox" name="Muzyka" value="Dubstep" />Dubstep<br>
	<input type="checkbox" name="Muzyka" value="Rock" />Rock<br>
	<input type="checkbox" name="Muzyka" value="Disco polo" />Disco polo<br>
</tr>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
<tr>
	<td><font size="3" ><b>Województwo</b></font></td>
	<td><font size="3" ><b>Wykształcenie</b></font></td>
</tr>
<tr>
	<td><select name="woj" >
		<option value=""></option>
		<option value="woj. dolnośląskie">woj. dolnośląskie</option>
		<option value="woj. kujawsko-pomorskie">woj. kujawsko-pomorskie</option>
		<option value="woj. lubelskie">woj. lubelskie</option>
		<option value="woj. lubuskie">woj. lubuskie</option>
		<option value="woj. łódzkie">woj. łódzkie</option>
		<option value="woj. małopolskie">woj. małopolskie</option>
		<option value="woj. mazowieckie">woj. mazowieckie</option>
		<option value="woj. opolskie">woj. opolskie</option>
		<option value="woj. podkarpackie">woj. podkarpackie</option>
		<option value="woj. podlaskie">woj. podlaskie</option>
		<option value="woj. pomorskie">woj. pomorskie</option>
		<option value="woj. śląskie">woj. śląskie</option>
		<option value="woj. świętokrzyskie">woj. świętokrzyskie</option>
		<option value="woj. warmińsko-mazurskie">woj. warmińsko-mazurskie</option>
		<option value="woj. wielkopolskie">woj. wielkopolskie</option>
		<option value="woj. zachodniopomorskie">woj. zachodniopomorskie</option>
		</select></td>
	<td><select name="wyksztalcenie" >
		<option value=""></option>
		<option value="podstawowe">podstawowe</option>
		<option value="zasadnicze zawodowe">zasadnicze zawodowe</option>
		<option value="średnie">średnie</option>
		<option value="wyższe">wyższe</option></td>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
<tr>
	<td><font size="3" ><b>Rok urodzenia</b></font></td>
	<td><font size="3" ><b>Ulubiony kolor (zaznacz kilka +CTRL)</b></font></td>
</tr>
<tr>
	<td><input type="radio" name="Wiek" value="mniej niż 18" /><18<br />
	<input type="radio" name="Wiek" value="18" />18<br />
	<input type="radio" name="Wiek" value="19-29" />19-29<br />
	<input type="radio" name="Wiek" value="30-49" />30-49<br />
	<input type="radio" name="Wiek" value="50-69" />50-69<br />
	<input type="radio" name="Wiek" value="70 lub więcej" />>=70</td>
	<td><select name="kolor" size="6" multiple="multiple">
	<option value="Biały">Biały</option>
	<option value="Czarny">Czarny</option>
	<option value="Czerwony">Czerwony</option>
	<option value="Żółty">Żółty</option>
	<option value="Niebieski">Niebieski</option>
	</select></td>
</tr>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
<tr align="center">
	<td colspan="2"><textarea name="kom" cols="30" rows="10">Umieść dodatkowe informacje</textarea>
</tr>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
<tr>
	<td align="center"><font size="3" ><b>E-mail</b></font></td>
	<td align="left"><input type="text" name="e-mail" placeholder="Wpisz adres e-mail" size="30" maxlength="25"/></td>
</tr>
<tr rowspan="2">
	<td><font color="#9966ff">.</td>
	<td><font color="#9966ff">.</td>
</tr>
	<td align="center"><input type="button" value="Wyślij formularz" onclick="xxx();"/></td>
	<td align="center"><input type="reset" value="Wyczyść formularz"/></td>
	
		
</form>
</html>

Post autor: **Afish** » 14 gru 2013, o 20:27

Większość przeglądarek wspiera teraz z automatu walidację pól, czego też używasz w swoim kodzie (być może nawet o tym nie wiedząc), dlatego JS nie jest tutaj potrzebny. Zrób następujące zmiany:

Kod: Zaznacz cały

<td align="center"><input type="button" value="Wyślij formularz" onclick="xxx();"/></td>
na:
<td align="center"><input type="submit" value="Wyślij formularz"/></td>

Czyli zmieniasz typ przycisku, aby odpalił walidację i przesyłanie formularza. Jeżeli jednak chcesz mieć jakąś własną walidację, to zmień jeszcze to:

Kod: Zaznacz cały

<form name=abc action="mailto:abad@op.pl" method="POST"  onreset="if (!confirm('Czy na pewno chcesz wyczyścić cały formularz?')) return false">
na:
<form name=abc action="mailto:abad@op.pl" method="POST" onsubmit="return validateForm()"  onreset="if (!confirm('Czy na pewno chcesz wyczyścić cały formularz?')) return false">

Oraz dodaj:

Kod: Zaznacz cały

<script>
function validateForm()
{
    if(!document.getElementById("jakis_element").value){
	alert("Walidacja nie przeszla");
	return false;
    }
return true;
}
</script>

Zauważ tylko, że pobieram element po ID, więc musisz takowe nadać polom formularza, lub pobierać elementy w inny sposób.

No i jedna uwaga językowa: Java Script a Java, to dwie różne rzeczy - nie stosuj tych wyrażeń zamiennie.

junior95 · Post autor: **junior95** » 14 gru 2013, o 21:11

Dzięki wielkie za wszystkie rady. heh Wiem, że użyłem takowego sprawdzania, jednak właśnie na tym polegało zadanie, że dwa miały być sprawdzane przez nowe polecenia HTML5 a reszta przez JavaSkrypt. Poczytałem trochę na wielu różnych stronach i złożyłem to w całość, czego wynikiem jest formularz, na jakim mi zależało;) Mimo to dziękuję raz jeszcze;)