Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Walidacja formularza
Forum PHP.pl > Forum > Przedszkole
in5ane
21.02.2009, 00:21:09
Witam, mam problem, otóż waliduję sobie formularz i mam problem z jedną opcją, a mianowicie dobrze mi sprawdza, czy pola zostały wypełnione, ale nie wiem jak sprawdzić, czy jedno z pól (pesel) ma 11 znaków (jeżeli nie ma, to alert).

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function przetwarzaj_dane ()
  3. {
  4.   var brakuje_danych=false;
  5.   var formularz=document.forms[0];
  6.   var napis="";
  7.   if (formularz.imie.value == ""){
  8.     napis += "Imię\n"
  9.     brakuje_danych=true;
  10.   }
  11.   if (formularz.nazwisko.value == ""){
  12.     napis += "Nazwisko\n"
  13.     brakuje_danych=true;
  14.   }
  15.   if (formularz.pesel.value == ""){
  16.     napis += "Pesel\n"
  17.     brakuje_danych=true;
  18.   }
  19.   if (formularz.nip.value == ""){
  20.     napis += "NIP\n"
  21.     brakuje_danych=true;
  22.   }
  23.   if (formularz.twp.value == ""){
  24.     napis += "Termin ważności paszportu\n"
  25.     brakuje_danych=true;
  26.   }
  27.   if (formularz.norweski.value == ""){
  28.     napis += "Norweski numer identyfikacyjny\n"
  29.     brakuje_danych=true;
  30.   }
  31.   if (formularz.adres.value == ""){
  32.     napis += "Adres\n"
  33.     brakuje_danych=true;
  34.   }
  35.   if (formularz.kod_pocztowy.value == ""){
  36.     napis += "Kod pocztowy\n"
  37.     brakuje_danych=true;
  38.   }
  39.   if (formularz.miejscowosc.value == ""){
  40.     napis += "miejscowosc\n"
  41.     brakuje_danych=true;
  42.   }
  43.   if (formularz.data_ur.value == ""){
  44.     napis += "Data urodzenia\n"
  45.     brakuje_danych=true;
  46.   }
  47.   if (formularz.telefon1.value == ""){
  48.     napis += "Telefon stacjonarny\n"
  49.     brakuje_danych=true;
  50.   }
  51.   if (formularz.polisa.value == ""){
  52.     napis += "Polisa ubezpieczeniowa III filaru\n"
  53.     brakuje_danych=true;
  54.   }
  55.   if (formularz.numer_obuwia.value == ""){
  56.     napis += "Numer obuwia\n"
  57.     brakuje_danych=true;
  58.   }
  59.   if (formularz.pesel.length != 11){
  60.     napis += "\nNiepoprawny pesel"
  61. 	brakuje_danych=true;
  62.   }
  63.   if (!brakuje_danych)
  64.     formularz.submit();
  65.   else
  66.     alert ("Nie wypełniłeś następujących pól:\n" + napis);
  67. }
  68. </script>
[HTML] pobierz, plaintext


Proszę o pomoc w rozwiązaniu tego problemu.
230005
21.02.2009, 00:35:36
Zrobiłbym to wyrażeniem regularnym :] . Poczytaj tu: http://republika.onet.pl/2471,34,1,,fabryka.html
Rafal Filipek
21.02.2009, 00:40:35
@ 230005 wiesz twoja odpowiedz jest na takim poziomie jakby in5ane zapytał się która godzina a ty podałbyś mu aktualną wartość jaką zwraca funkcja microtime().

@in5ane
Kod
if (formularz.pesel.length != 11){

tutaj musisz odwalac sie do wartosci pola a nie do pola, tak wiec
Kod
if (formularz.pesel.value.length != 11){
krzysiekk
21.02.2009, 09:18:07
witam ja korzystam z PEAR QuickForm i no generuje taki kod przy podaniu reguł walidacji jesli się przyda to proszę
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. function validate_PPForm(frm) {
  4.   var value = '';
  5.   var errFlag = new Array();
  6.   var _qfGroups = {};
  7.   _qfMsg = '';
  8.  
  9.   value = frm.elements['pesel'].value;
  10.   if (value == '' && !errFlag['pesel']) {
  11.     errFlag['pesel'] = true;
  12.     _qfMsg = _qfMsg + '\n - Proszę podać PESEL';
  13.   }
  14.  
  15.   value = frm.elements['pesel'].value;
  16.   var regex = /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/;
  17.   if (value != '' && !regex.test(value) && !errFlag['pesel']) {
  18.     errFlag['pesel'] = true;
  19.     _qfMsg = _qfMsg + '\n - PESEL powinien składac się tylko z cyfr';
  20.   }
  21.  
  22.   value = frm.elements['pesel'].value;
  23.   if (value != '' && value.length > 11 && !errFlag['pesel']) {
  24.     errFlag['pesel'] = true;
  25.     _qfMsg = _qfMsg + '\n - Pesel jest zadługi';
  26.   }
  27.  
  28.   value = frm.elements['pesel'].value;
  29.   if (value != '' && value.length < 11 && !errFlag['pesel']) {
  30.     errFlag['pesel'] = true;
  31.     _qfMsg = _qfMsg + '\n - Pesel jest zakrótki';
  32.   }
  33.  
  34.   if (_qfMsg != '') {
  35.     _qfMsg = 'Formularz zawiera błędy:' + _qfMsg;
  36.     _qfMsg = _qfMsg + '\nProszę poprawić błędy!';
  37.     alert(_qfMsg);
  38.     return false;
  39.   }
  40.   return true;
  41. }
  42. //]]>
  43. </script>
[HTML] pobierz, plaintext
in5ane
21.02.2009, 10:44:59
A jak mogę zrobić, że jak mi się wyświetli ten cały alert to jak kliknę OK to, żeby mi się nie kasowały wszystkie wypełnione pola?
dr_bonzo
21.02.2009, 10:51:09
JAkim cudem kasuje ci sie zawartosc formularza?
in5ane
21.02.2009, 11:02:32
Nie wiem, jak kliknę OK, to się kasuje i jak wezmę wstecz to jest dobrze.

P.S.: Zerknij sam: http://dancepiotrkow.pl/formularz.php
skowron-line
21.02.2009, 11:08:08
Kod
<form action="" onsubmit="return nazwaFunkcji()">

wtedy w przypadku false formularz sie nie wyśle
in5ane
21.02.2009, 11:10:13
On się nie wysyła, tylko, że pola się oczyszczają.
skowron-line
21.02.2009, 11:11:51
Cytat(in5ane @ 21.02.2009, 11:10:13 ) *
On się nie wysyła, tylko, że pola się oczyszczają.

Może zamiast Submita masz Reste smile.gif
A poważnie to pokaż cały kod.
dr_bonzo
21.02.2009, 11:17:01
Cytat
On się nie wysyła, tylko, że pola się oczyszczają.

Dzizez, man, podstawy podstaw. Formularz ci sie nie czysci, tylko zostaje wyslany a ty potem wysylasz pusty formularz.

Daj onsubmit="przetwarzaj_dane()" i zwracaj false jesli formularz ma sie NIE wyslac. I zwroc TRUE jesli MA sie wyslac (jak kolega pisal wyzej).
in5ane
21.02.2009, 11:17:49
To tak schematycznie ten kod html, będę musiał to wkleić do strony..

Proszę o pomoc z moim problem.

[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Script-Type" content="text/javascript">
  7. <title>Formularz</title>
  8. <script type="text/javascript">
  9. function przetwarzaj_dane ()
  10. {
  11.   var brakuje_danych=false;
  12.   var formularz=document.forms[0];
  13.   var napis="";
  14.   if (formularz.imie.value == ""){
  15.     napis += "- Imię\n"
  16.     brakuje_danych=true;
  17.   }
  18.   if (formularz.nazwisko.value == ""){
  19.     napis += "- Nazwisko\n"
  20.     brakuje_danych=true;
  21.   }
  22.   if (formularz.nip.value == ""){
  23.     napis += "- NIP\n"
  24.     brakuje_danych=true;
  25.   }
  26.   if (formularz.twp.value == ""){
  27.     napis += "- Termin ważności paszportu\n"
  28.     brakuje_danych=true;
  29.   }
  30.   if (formularz.norweski.value == ""){
  31.     napis += "- Norweski numer identyfikacyjny\n"
  32.     brakuje_danych=true;
  33.   }
  34.   if (formularz.adres.value == ""){
  35.     napis += "- Adres\n"
  36.     brakuje_danych=true;
  37.   }
  38.   if (formularz.kod_pocztowy.value == ""){
  39.     napis += "- Kod pocztowy\n"
  40.     brakuje_danych=true;
  41.   }
  42.   if (formularz.miejscowosc.value == ""){
  43.     napis += "- miejscowosc\n"
  44.     brakuje_danych=true;
  45.   }
  46.   if (formularz.data_ur.value == ""){
  47.     napis += "- Data urodzenia\n"
  48.     brakuje_danych=true;
  49.   }
  50.   if (formularz.telefon1.value == ""){
  51.     napis += "- Telefon stacjonarny\n"
  52.     brakuje_danych=true;
  53.   }
  54.   if (formularz.polisa.value == ""){
  55.     napis += "- Polisa ubezpieczeniowa III filaru\n"
  56.     brakuje_danych=true;
  57.   }
  58.   if (formularz.numer_obuwia.value == ""){
  59.     napis += "- Numer obuwia\n"
  60.     brakuje_danych=true;
  61.   }
  62.   if (formularz.pesel.value.length != 11){
  63.     napis += "\nNiepoprawny pesel\n"
  64.     brakuje_danych=true;
  65.   }
  66.   if (!formularz.klauzula.checked){
  67.     napis += "\nMusisz wyrazić zgodę na przetwarzanie danych osobowych\n"
  68.     brakuje_danych=true;
  69.   }
  70.   if (!brakuje_danych)
  71.     formularz.submit();
  72.   else
  73.     alert ("Nie wypełniłeś następujących pól:\n" + napis);
  74. }
  75. </script>
  76. </head>
  77. <body>
  78.  
  79. <?php
  80.  
  81. if(!empty($_POST['klauzula'])) {
  82. ///// zapisywanie, wgrywanie itp..
  83. } else {
  84.  
  85. echo '
  86. <form method="post" action="#">
  87.     <table style="border-collapse: collapse">
  88.         <tr>
  89.             <td width="300" style="font-family: Verdana; font-size: 10px;"><strong>Imię</strong></td>
  90.             <td><input type="text" name="imie" size="55" style="font-family: Verdana; font-size: 10px;"></td>
  91.         </tr>
  92.         <tr>
  93.             <td width="300" style="font-family: Verdana; font-size: 10px;"><strong>Nazwisko</strong></td>
  94.             <td><input type="text" name="nazwisko" size="55" style="font-family: Verdana; font-size: 10px;"></td>
  95.         </tr>
  96.         <tr>
  97.             <td width="300" style="font-family: Verdana; font-size: 10px;"><strong>Pesel</strong></td>
  98.             <td><input type="text" name="pesel" size="55" style="font-family: Verdana; font-size: 10px;"></td>
  99.         </tr>
  100.         <tr>
  101.             <td width="300" style="font-family: Verdana; font-size: 10px;"><strong>NIP</strong></td>
  102.             <td><input type="text" name="nip" size="55" style="font-family: Verdana; font-size: 10px;"></td>
  103.         </tr>
  104.         <tr>
  105.             <td width="300" style="font-family: Verdana; font-size: 10px;"><strong>Termin ważności paszportu</strong></td>
  106.             <td><input type="text" name="twp" size="55" style="font-family: Verdana; font-size: 10px;"></td>
  107.         </tr>
  108. ///// USUNĄŁEM TROCHĘ TYCH PÓL, BO NIE CHCIAŁ SIĘ ZMIEŚCIĆ POST
  109.         <tr>
  110.             <td></td>
  111.             <td><input type="submit" value="Wyślij" onClick="przetwarzaj_dane()" style="font-family: Verdana; font-size: 10px;"></td>
  112.         </tr>
  113.     </table>    
  114. </form>
  115. ';
  116.  
  117. }
  118.  
  119. ?>
  120.  
  121. </body>
  122. </html>
[PHP] pobierz, plaintext
skowron-line
21.02.2009, 11:20:13
No przecież napisałem.
Kod
<form method="post" action="#">


zamień na
Kod
<form method="post" action="#" ronSubmit="return przetwarzaj_dane()">


a z submita usun tego onClick -a
in5ane
21.02.2009, 11:20:42
OK, zobaczę ;-)

@edit: to samo jest nadal. Po kliknięciu w alercie OK dane z formularza mi uciekają i trzeba kliknąć wstecz. Proszę o jakąś sensowną odpowiedź. Pozdrawiam ;-)
krzysiekk
21.02.2009, 12:18:32
zobacz na to moze co pomoże 
[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.  
  6.  
  7. <body class="twoColElsRtHdr">
  8. <div id="container">
  9.  
  10.  
  11.   <div id="mainContent">
  12.  
  13.  
  14. <script type="text/javascript">
  15. //<![CDATA[
  16. function validate_PPForm(frm) {
  17.   var value = '';
  18.   var errFlag = new Array();
  19.   var _qfGroups = {};
  20.   _qfMsg = '';
  21.  
  22.   value = frm.elements['pesel'].value;
  23.   if (value == '' && !errFlag['pesel']) {
  24.     errFlag['pesel'] = true;
  25.     _qfMsg = _qfMsg + '\n - Proszę podać PESEL';
  26.   }
  27.  
  28.   value = frm.elements['pesel'].value;
  29.   var regex = /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/;
  30.   if (value != '' && !regex.test(value) && !errFlag['pesel']) {
  31.     errFlag['pesel'] = true;
  32.     _qfMsg = _qfMsg + '\n - PESEL powinien składac się tylko z cyfr';
  33.   }
  34.  
  35.   value = frm.elements['pesel'].value;
  36.   if (value != '' && value.length > 11 && !errFlag['pesel']) {
  37.     errFlag['pesel'] = true;
  38.     _qfMsg = _qfMsg + '\n - Pesel jest zadługi';
  39.   }
  40.  
  41.   value = frm.elements['pesel'].value;
  42.   if (value != '' && value.length < 11 && !errFlag['pesel']) {
  43.     errFlag['pesel'] = true;
  44.     _qfMsg = _qfMsg + '\n - Pesel jest zakrótki';
  45.   }
  46.  
  47.   if (_qfMsg != '') {
  48.     _qfMsg = 'Formularz zawiera błędy:' + _qfMsg;
  49.     _qfMsg = _qfMsg + '\nProszę poprawić błędy!';
  50.     alert(_qfMsg);
  51.     return false;
  52.   }
  53.   return true;
  54. }
  55. //]]>
  56. </script> 
  57.  
  58.  
  59.  
  60. <div id="rejestracja">
  61. <form  action="/www/index.php" method="post" name="PPForm" id="PPForm" onsubmit="try { var myValidator = validate_PPForm; } catch(e) { return true; } return myValidator(this);">
  62. 		<div id="naglowek">Protokół przekazania.</div>
  63. 					<div id="group">
  64. 						 <input name="_qf_PPForm_next" value="Dalej" type="submit" />
  65. 					</div>					
  66.  
  67.  
  68. 					<div id="all"> <div class="label"></div><div class="element"></div> </div>				
  69.  
  70.  
  71. 					<div id="all"> <div class="label">Dane osobowe</div><div class="element"></div> </div>				
  72.  
  73.  
  74. 					<div id="all"> <div class="label">Imię:</div><div class="element"><input size="50" class="rule" name="imie" type="text" /></div> </div>				
  75.  
  76.  
  77. 					<div id="all"> <div class="label">Nazwisko:</div><div class="element"><input size="50" class="rule" name="nazwisko" type="text" /></div> </div>				
  78.  
  79.  
  80. 					<div id="all"> <div class="label">Nr identyfikacjny Abonenta:</div><div class="element"><input size="15" name="nrabonenta" type="text" /></div> </div>				
  81.  
  82.  
  83. 					<div id="all"> <div class="label">PESEL:</div><div class="element"><input size="12" class="rule" name="pesel" type="text" /></div> </div>				
  84.  
  85.  
  86. 					<div id="all"> <div class="label">Regon:</div><div class="element"><input size="50" name="regon" type="text" /></div> </div>				
  87.  
  88.  
  89. 					<div id="all"> <div class="label">Seria i nr Dowodu Osobistego:</div><div class="element"><input size="10" name="nrdowodu" type="text" /></div> </div>				
  90.  
  91.  
  92. 					<div id="all"> <div class="label">Nip:</div><div class="element"><input size="11" name="nip" type="text" /></div> </div>				
  93.  
  94.  
  95. 					<div id="all"> <div class="label">Adres Zameldowania</div><div class="element"></div> </div>				
  96.  
  97.  
  98.  
  99.  
  100.  
  101.  
  102. 		</form> 
  103.  <p></p>
  104. </div>
  105.  
  106.    <!-- end #mainContent --></div>
  107. 	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  108.    <div id="footer">
  109.     <p></p>
  110.   <!-- end #footer --></div>
  111. <!-- end #container --></div>
  112. </body>
  113. </html>
[HTML] pobierz, plaintext
skowron-line
21.02.2009, 12:23:57
Cytat(in5ane @ 21.02.2009, 11:20:42 ) *
OK, zobaczę ;-)

@edit: to samo jest nadal. Po kliknięciu w alercie OK dane z formularza mi uciekają i trzeba kliknąć wstecz. Proszę o jakąś sensowną odpowiedź. Pozdrawiam ;-)


Kod
if( brak_danych != '' ){
   alert ("Nie wypełniłeś następujących pól:\n" + napis);
return false;
}
return true;
in5ane
21.02.2009, 12:37:17
@skowron-line: dzięki, działa ;-)
krzysiekk
21.02.2009, 12:38:06
proszę tu masz resztę sobie dorób chyba o to ci chodzi to dotyczy tylko pesela


[HTML] pobierz, plaintext 
  1. <a href="http://mkmnet.pl/kklima/Noname1.html">FORM</a>
[HTML] pobierz, plaintext
in5ane
21.02.2009, 12:42:20
OK, dzięki Tobie też.
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.