Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [js] Formularz - Poprawność
nieraczek
post
Post #1





Grupa: Zarejestrowani
Postów: 405
Pomógł: 6
Dołączył: 12.01.2007

Ostrzeżenie: (0%)
-----

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


Ten post edytował nieraczek 9.08.2007, 14:47:43
Go to the top of the page
+Quote Post
Cysiaczek
post
Post #2





Grupa: Moderatorzy
Postów: 4 465
Pomógł: 137
Dołączył: 26.03.2004
Skąd: Gorzów Wlkp.
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.


--------------------
To think for yourself you must question authority and
learn how to put yourself in a state of vulnerable, open-mindedness;
chaotic, confused, vulnerability, to inform yourself.
Think for yourself. Question authority.
Go to the top of the page
+Quote Post
nieraczek
post
Post #3





Grupa: Zarejestrowani
Postów: 405
Pomógł: 6
Dołączył: 12.01.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Cysiaczek
post
Post #4





Grupa: Moderatorzy
Postów: 4 465
Pomógł: 137
Dołączył: 26.03.2004
Skąd: Gorzów Wlkp.
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


--------------------
To think for yourself you must question authority and
learn how to put yourself in a state of vulnerable, open-mindedness;
chaotic, confused, vulnerability, to inform yourself.
Think for yourself. Question authority.
Go to the top of the page
+Quote Post
nieraczek
post
Post #5





Grupa: Zarejestrowani
Postów: 405
Pomógł: 6
Dołączył: 12.01.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 11:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn