Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] Formularz - Poprawność
Forum PHP.pl > Forum > Przedszkole
nieraczek
9.08.2007, 14:46:26
Jak zrobić w javascript, że mając formularz po kliknięciu na przycisk "wyślij" następuje sprawdzenie czy wpisano we wszystkie pola formularza dane, ale w ten sposób, że jesli nie wpisano czegoś w dane pole to bezpośrednio przy nim wyświetlany jest komunikat, np. "Wpisz imię"; "Wpisz nazwisko" ? Wszędzie gdzie szukam to jest to zrobione, że jest wyświetlany MessageBox, że nie wypełniono pól a ja bym chciał żeby odpowiedni napis pojawiał się obok danego niewypełnionego pola - np. w labelu - etykiecie czy czymś podobnym - jak to zrobić ?
Wycinek kodu:
[HTML] pobierz, plaintext 
  1. <head>
  2. <script type="text/javascript">
  3. function funkcja()
  4. {
  5.  
  6. if(document.formularz.imie.value=="")
  7. {
  8.  
  9. }
  10.  
  11. if(document.formularz.nazwisko.value=="")
  12. {
  13.  
  14. }
  15.  
  16. }
  17. </script>
  18. </head>
  19.  
  20. <body>
  21.  
  22. <p>
  23. <form name="formularz">
  24. <table>
  25. <tr>
  26. <td>Wpisz imię</td>
  27. <td> <input type="text" name="imie" size="20" maxlength="20"/></td>
  28. <td><label></label></td>
  29. </tr>
  30.  
  31. <tr>
  32. <td>Wpisz nazwisko</td>
  33. <td> <input type="text" name="nazwisko" size="20" maxlength="20"/></td>
  34. <td><label></label></td>
  35. </tr>
  36.  
  37. <tr>
  38. <td><input type="submit" name="wyslij" value="Wyślij" onClick="funkcja();"/></td>
  39. <td><input type="reset" name="reset" value="Reset" /></td>
  40. </tr>
  41. </table>
  42. </form>
[HTML] pobierz, plaintext
Cysiaczek
9.08.2007, 14:53:47
Nadaj labelowi atrybut id=imie_label, potem, gdy jest błąd, pobieraj ten label wg id i poprzez innerHTML wstaw tekst. Tu nie ma wiele kombinowania.

Pozdrawiam.
nieraczek
9.08.2007, 15:17:46
ale 
[HTML] pobierz, plaintext 
  1. document.getElementById("imie_label").innerHTML="ppppppp";
[HTML] pobierz, plaintext
to sprawia, że tekst "ppppp" pojawia się na labelu tylko na moment i znika
Cysiaczek
9.08.2007, 15:25:22
Oj. Dodaj wywołanie tej funckji do tagu
[HTML] pobierz, plaintext 
  1. <form onSubmit="funkcja()">
[HTML] pobierz, plaintext

i jak jest błąd, to zwracaj false - formularz się nie wyśle
nieraczek
10.08.2007, 13:09:31
Dzięki, a jak zrobić żeby np. jak ktoś wyłączy w przeglądarce JavaScript to formularz po kliknięciu na "wyślij" się nie wysyłał - bo teraz jak ktoś wyłącza js to formularz się wysyła:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Dwa</title>
  6. <style type="text/css">
  7.  
  8. body 
  9. {
  10. 	background-color: #FF9966;
  11. }
  12.  
  13. .czerwien 
  14. {
  15. color: #FF0000; 
  16. }
  17.  
  18. </style>
  19.  
  20.  
  21.  
  22. <script type="text/javascript">
  23. //czyszczenie etykiet po wciśnięciu na "reset":
  24. function czyszczenie()
  25. {
  26. document.getElementById("imie_label").innerHTML="";
  27. document.getElementById("email_label").innerHTML="";
  28. document.getElementById("liczba_label").innerHTML="";
  29. }
  30.  
  31.  
  32. function funkcja()
  33. {
  34.  
  35. //wyczyszczenie napisów na etykietach:
  36. document.getElementById("imie_label").innerHTML="";
  37. document.getElementById("email_label").innerHTML="";
  38. document.getElementById("liczba_label").innerHTML="";
  39.  
  40. var bledy=1; //deklaracja zmiennej "bledy": 0-błędy są; 1-brak błędów
  41.  
  42. //jeśli pole tekstowe "imie" jest puste to wyświetl komunikat błędu:
  43. if(document.formularz.imie.value=="")
  44. {
  45. document.getElementById("imie_label").innerHTML="Wpisz imię.";
  46. bledy=0;
  47. }
  48.  
  49. //jeśli pole tekstowe "email" jest puste lub nie ma w nim "@" to wyświetl komunikat błedu:
  50. if(document.formularz.email.value=="" || document.formularz.email.value.indexOf('@')==-1)
  51. {
  52. document.getElementById("email_label").innerHTML="Wpisz poprawny email.";
  53. bledy=0;
  54. }
  55.  
  56. //jeśli nie wpisano liczby to zostaje wyświetlony komunikat błędu:
  57. if(document.formularz.liczba.value=="" || isNaN(document.formularz.liczba.value)==true)
  58. {
  59. document.getElementById("liczba_label").innerHTML="Wpisz liczbę.";
  60. bledy=0;
  61. }
  62.  
  63.  
  64. if (bledy==0) return false; //zwróć "false" a tym samym nie wysyłaj formularza
  65. else return true; //zwróć "true" a tym samym wyślij formularz
  66. }
  67.  
  68. </script>
  69. </head>
  70.  
  71. <body>
  72.  
  73.  
  74. <!--"onSubmit="return funkcja();"" W przypadku, gdy dane zawarte w formularzu spełniają nakładane ograniczenia po naciśnięciu przycisku "Wyślij", wynikiem funkcji jest wartość true-formularz zostaje wysłany,
  75. w przeciwnym razie — false i formularz nie zostaje wysłany -->
  76. <form name="formularz" action="mailto:xxx@wp.pl" method="post" onsubmit="return funkcja();">
  77. <table>
  78.  
  79. <tr>
  80. <td>Wpisz imię</td>
  81. <td> <input type="text" name="imie" size="20" maxlength="20"/></td>
  82. <td class="czerwien"><label id="imie_label"></label></td>
  83. </tr>
  84.  
  85. <tr>
  86. <td>Wpisz email</td>
  87. <td> <input type="text" name="email" size="20" maxlength="20"/></td>
  88. <td class="czerwien"><label id="email_label"></label></td>
  89. </tr>
  90.  
  91. <tr>
  92. <td>Wpisz liczbę</td>
  93. <td> <input type="text" name="liczba" size="20" maxlength="20"/></td>
  94. <td class="czerwien"><label id="liczba_label"></label></td>
  95. </tr>
  96.  
  97. <tr>
  98. <td><input type="submit" name="wyslij" value="Wyślij"/></td>
  99. <td><input type="reset" name="reset" value="Reset" onclick="czyszczenie();"/></td>
  100. <!--button "reset" nie czyści etykiet więc samemu trza je wyczyścić przy użyciu funkcji "czyszczenie();" -->
  101. </tr>
  102.  
  103. </table>
  104. </form>
  105.  
  106.  
  107. </body>
  108. </html>
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.