Sprawdzenie (Validacja) poprawności danych formularza
Skrypt sprawdza czy podane zostało:
Imie pokazuje nam jak sprawdzić poprawność danych w polu input
Mail pokazuje nam jak sprawdzić poprawność adresu email
Wiek pokazuje nam jak sprawdzić poprawność danych w polu select
Płeć pokazuje nam jak sprawdzić poprawność danych radiobutton
Są to podstawowe dane najczęściej wykorzystywane w formularzach.
Listing
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE= "JavaScript" TYPE= "text/javascript">
<!-- Ukrycie przed przeglądarkami nie obsługującymi JavaScriptów
function sprawdz()
{
var error = '';
imie = document.getElementById('imie').value;
wiek = document.getElementById('wiek').value;
mail = document.getElementById('mail').value;
// sprawdzenie poprawności adresu email
var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
var odp = regex.test(mail);
if (!odp) {
var error = 'Nie poprawny adres email';
}
// sprawdzenie czy płeć została wybrana
sex_value = '';
sex = document.formularz1.sex.length;
for (i = 0; i < sex; i++) {
if (document.formularz1.sex[i].checked) {
sex_value = document.formularz1.sex[i].value;
}
}
if(!sex_value){
var error = 'zaznacz płeć';
}
//sprawdzenie czy zostało podane imie i wiek
if(!imie){ var error = 'Podaj imie'; }
if(!wiek){ var error = 'Podaj wiek'; }
//Jeżeli są jakies błędy wyświetl je
if(error){
var errorMassage = document.getElementById('errorMassage');
errorMassage.innerHTML = error;
// Jeżli nie wyślij formularz
}else{
var errorMassage = document.getElementById('errorMassage');
errorMassage.innerHTML = '';
formularz1.submit();
}
}
// Koniec kodu JavaScript -->
</SCRIPT>
</HEAD>
<BODY>
<FORM name = "formularz1" action="index.php">
Proszę podać swoje dane:
<BR />
(Pola oznaczone * muszą zostać wypełnione)
<div id="errorMassage" style="color:#FF0000; margin:5px 5px 5px 5px; padding:5px 5px 5px 5px"></div>
<BR />
<FORM NAME = "formularz1">
<TABLE>
<TR>
<TD colspan="2"><B>Dane personalne:</B> </TD>
</TR>
<TR>
<TD>imię: </TD>
<TD><INPUT TYPE = "text" id = "imie">* </TD>
</TR>
<TR>
<TD>wiek</TD>
<TD>
<select id="wiek">
<option>Wybierz</option>
<option value="1">5-15</option>
<option value="2">15-30</option>
</select>*
</TD>
</TR>
<TR>
<TD>płeć</TD>
<TD>
<input name="sex" type="radio" value="1">
<input name="sex" type="radio" value="2">
</TD>
</TR>
<TR>
<TD>mail</TD>
<TD><INPUT TYPE = "text" id = "mail"></TD>
</TR>
<TR>
<TD> </TD>
<TD ALIGN = "center">
<INPUT TYPE = "button"
NAME = "wyslij"
VALUE = "sprawdź dane"
onClick = "sprawdz()">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE= "JavaScript" TYPE= "text/javascript">
<!-- Ukrycie przed przeglądarkami nie obsługującymi JavaScriptów
function sprawdz()
{
var error = '';
imie = document.getElementById('imie').value;
wiek = document.getElementById('wiek').value;
mail = document.getElementById('mail').value;
// sprawdzenie poprawności adresu email
var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
var odp = regex.test(mail);
if (!odp) {
var error = 'Nie poprawny adres email';
}
// sprawdzenie czy płeć została wybrana
sex_value = '';
sex = document.formularz1.sex.length;
for (i = 0; i < sex; i++) {
if (document.formularz1.sex[i].checked) {
sex_value = document.formularz1.sex[i].value;
}
}
if(!sex_value){
var error = 'zaznacz płeć';
}
//sprawdzenie czy zostało podane imie i wiek
if(!imie){ var error = 'Podaj imie'; }
if(!wiek){ var error = 'Podaj wiek'; }
//Jeżeli są jakies błędy wyświetl je
if(error){
var errorMassage = document.getElementById('errorMassage');
errorMassage.innerHTML = error;
// Jeżli nie wyślij formularz
}else{
var errorMassage = document.getElementById('errorMassage');
errorMassage.innerHTML = '';
formularz1.submit();
}
}
// Koniec kodu JavaScript -->
</SCRIPT>
</HEAD>
<BODY>
<FORM name = "formularz1" action="index.php">
Proszę podać swoje dane:
<BR />
(Pola oznaczone * muszą zostać wypełnione)
<div id="errorMassage" style="color:#FF0000; margin:5px 5px 5px 5px; padding:5px 5px 5px 5px"></div>
<BR />
<FORM NAME = "formularz1">
<TABLE>
<TR>
<TD colspan="2"><B>Dane personalne:</B> </TD>
</TR>
<TR>
<TD>imię: </TD>
<TD><INPUT TYPE = "text" id = "imie">* </TD>
</TR>
<TR>
<TD>wiek</TD>
<TD>
<select id="wiek">
<option>Wybierz</option>
<option value="1">5-15</option>
<option value="2">15-30</option>
</select>*
</TD>
</TR>
<TR>
<TD>płeć</TD>
<TD>
<input name="sex" type="radio" value="1">
<input name="sex" type="radio" value="2">
</TD>
</TR>
<TR>
<TD>mail</TD>
<TD><INPUT TYPE = "text" id = "mail"></TD>
</TR>
<TR>
<TD> </TD>
<TD ALIGN = "center">
<INPUT TYPE = "button"
NAME = "wyslij"
VALUE = "sprawdź dane"
onClick = "sprawdz()">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
-
-
Tre¶æ komentarza
-
:: Losowe artykuły
:: Wymiana linków
Modowe inspiracje |
Android Gry i Aplikacje |
ZaplanujTransport.pl: Przeprowadzki, transport, aukcje |
Logo dla firmy |
Change Tires - Car Weather Forecast Reminder |
Laminas: MVC Framework for PHP |
IT Books Reviews and Programming: JS, JAVA, PHP, ANDROID, CSS |
Katalog roślin |
Programming articles: JAVA, PHP, C++, Python, JavaScript |
Kancelaria Adwokacka Łukasz Huszno
