Loading:

Zaplanuj Przeprowadzke - Ściągnij Darmową Aplikację na Androida

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.



Napisz Artykuł

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>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=382

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors