Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript][HTML]jquery validacja formularza z dwoma submitami
Forum PHP.pl > Forum > Przedszkole
pablo_83
22.03.2011, 20:24:07
witam,
mam problem z formularzem i nie mogę dojść do konkretnego rozwiązania.

[HTML] pobierz, plaintext 
  1.                    <form action="" method="post" id="form_z_katalogu">
  2.  
  3. <!-- wcześniejsza część formularza -->
  4.                             <!-- Wybierz format swojego obrazu -->
  5.                             <div class="box">
  6.                                 <div class="opis_pola">Wybierz format swojego obrazu:</div>
  7.                                 <div id="slides">
  8.                                     <div class="slides_container">
  9.                                        <div> <span class="tytul">Kwadratowe</span> <span class="format">
  10.                                                 <input type="radio" class=" rozmiar" name="format" value="30x30" />
  11. 								30x30</span> <span class="format">
  12.                                                 <input type="radio" class=" rozmiar" name="format" value="30x30" />
  13. 								30x30</span> <span class="format">
  14.                                                 <input type="radio" class=" rozmiar" name="format" value="30x30" />
  15. 								30x30</span> </div>
  16.                                         <div> <span class="tytul">Własny format</span> <span class="format">
  17.                                                 <input type="text" class=" szer" name="szerokosc" />
  18. 								Szerokość</span> <span class="format">
  19.                                                 <input type="text" class=" wys" name="wysokosc"/>
  20. 								Wysokość</span> 
  21.                                         </div>
  22.                                     </div>
  23.                                     <a href="#" class="prev"></a> <a href="#" class="next"></a> </div>
  24.                             </div>
  25.                             <!-- Koniec --> 
  26.                             <!-- Logowanie/Formularz -->
  27.                             <div class="logowanie_formularz">
  28.                                 <div class="menu"><a class="logowanie test" rel="1">Logowanie</a> <a class="formularz test aktywna" rel="2">Formularz</a></div>
  29.                                 <div>
  30.                                     <div class="logowanie form"  >
  31.                                        <div class="pole">
  32.                                             <div class="pole_opis">Email:</div>
  33.                                             <input type="text" name="login"/>
  34.                                         </div>
  35.                                         <div class="pole">
  36.                                             <div class="pole_opis">Hasło:</div>
  37.                                             <input type="password"  name="haslo_login" />
  38.                                         </div>
  39.                                         <div class="pole">
  40.                                             <div class="pole_opis"></div>
  41.                                             <input type="button" class="reset" value="reset"/>
  42.                                             <input type="submit" class="button zaloguj" name="zaloguj" value="Zaloguj się" />
  43.                                         </div>
  44.                                     </div>
  45.                                     <div class="formularz form" >
  46.                                                                               <div class="pole">
  47.                                             <div class="pole_opis">Imię:</div>
  48.                                             <input type="text" class="" name="imie"/>
  49.                                         </div>
  50.                                         <div class="pole">
  51.                                             <div class="pole_opis">Nazwisko:</div>
  52.                                             <input type="text" class="" name="nazwisko"/>
  53.                                         </div>
  54.                                         <div class="pole">
  55.                                             <div class="pole_opis">Ulica:</div>
  56.                                             <input type="text" class="" name="ulica"/>
  57.                                         </div>
  58.                                         <div class="pole">
  59.                                             <div class="pole_opis">Nr domu:</div>
  60.                                             <input type="text" class="" name="nr_domu"/>
  61.                                         </div>
  62.                                         <div class="pole">
  63.                                             <div class="pole_opis">Miejscowość:</div>
  64.                                             <input type="text" class="" name="miejscowosc"/>
  65.                                         </div>
  66.                                         <div class="pole">
  67.                                             <div class="pole_opis">Kod pocztowy:</div>
  68.                                             <input type="text" class="" name="kod"/>
  69.                                         </div>
  70.                                         <div class="pole">
  71.                                             <div class="pole_opis">Telefon kontaktowy:</div>
  72.                                             <input type="text" class="" name="telefon"/>
  73.                                         </div>
  74.                                         <div class="pole">
  75.                                             <div class="pole_opis">Email:</div>
  76.                                             <input type="text" class="" name="email"/>
  77.                                         </div>
  78.                                         <div class="pole">
  79.                                             <div class="pole_opis">Hasło:</div>
  80.                                             <input type="password"   id="haslo" class="" name="haslo"/>
  81.                                         </div>
  82.                                         <div class="pole">
  83.                                             <div class="pole_opis">Powtórz hasło:</div>
  84.                                             <input type="password" class="" name="powtorz_haslo"/>
  85.                                         </div>
  86.                                         <div class="pole">
  87.                                             <div class="pole_opis"></div>
  88.                                             <input type="button" class="reset" value="reset"/>
  89.                                             <input type="submit" class="button zarejestruj" name="zarejestruj" value="Zamów" />
  90.                                         </div>
  91.                                     </div>
  92.                                 </div>
  93.                             </div>
  94.  <div class="grupa">Za pobraniem:
  95.                                 <input type="radio" class="" name="platnosc" value="za_pobraniem" />
  96. 					Przedpłata:
  97.                                 <input type="radio" class="" name="platnosc" value="przedplata" />
  98.                             </div>
  99. <!-- dalsza część formularza -->
  100. </form>
  101.                             <!-- Koniec --> 
[HTML] pobierz, plaintext

cały formularz ma być walidowany, po dokonaniu wyboru przez uzytkownika aby przejść dalej musi się zalogować bądź zarejestrować (logowanie i rejestracja na display'u none/block). Domyślnie aktywny jest div z polami do rejestracji.

Nie wiem jak dobrze zrobić aby walidacja w jednym czasie obejmowała tylko część obecnie widoczną (logowanie bądź rejestracje). Jeśli użytkownik ma konto i chce się zalogować mają być brane pod uwagę wszystkie pola z wyłączeniem pól do rejestracji, a gdy chce się rejestrować to samo tyle że bez pól logowania.
Poniżej jquery do walidacji form'a
[HTML] pobierz, plaintext 
  1.    $("#form_z_katalogu").validate({
  2.               // pola z formularza rejestracji
  3.                     rules:{
  4.                         rodzaj:{
  5.                             required: true
  6.                         },
  7.  
  8.                         imie:{
  9.                             required: true
  10.                         },
  11.                         nazwisko:{
  12.                             required: true
  13.                         },
  14.                         ulica:{
  15.                             required: true
  16.                         },
  17.                         nr_domu:{
  18.                             required: true
  19.                         },
  20.                         miejscowosc:{
  21.                             required: true
  22.                         },
  23.                         kod:{
  24.                             required: true
  25.                         },
  26.                         telefon:{
  27.                             required: true,
  28.                             number: true
  29.                         },
  30.                         email:{
  31.                             required: true,
  32.                             email: true
  33.                         },
  34.                         haslo:{
  35.                             required: true
  36.                         },
  37.                         powtorz_haslo: {
  38.                             required: true,
  39.                             minlength: 5,
  40.                             equalTo: "#haslo"
  41.                         }
  42.                     }
  43.  
  44.  
  45.                 });
[HTML] pobierz, plaintext

Fifi209
22.03.2011, 20:40:45
Zamiast kombinować zrób lepiej dwa formularze? Wrzuć je w divy i ten co ma być nieaktywny możesz przykryć np. półprzeźroczystą warstwą.
pablo_83
22.03.2011, 20:50:08
nie mogę zrobić dwóch formularzy bo opcje loguj/rejestruj są zagnieżdżone pomiędzy innymi polami, tak jest pocięta strona i tego za bardzo zmienić nie mogę.

szkielet wyglada mniej więcej tak:

<form>
-- input
-- input

-- inputy logowania
-- submit logowania

-- inputy rejestracji
-- submit rejestracji

-- input
-- input
</form>
logowanie i rejestracja wyświetlane/ukrywane przez display
poprzez naciśnięcie któregoś z submitów muszę dostać w odpowiedzi wartości z wszystkich pozostałych pól (z wyłączeniem rej bądź log)
Fifi209
22.03.2011, 20:56:59
W takim razie strona jest źle "pocięta" smile.gif Takich rzeczy się nie robi, właśnie dlatego. smile.gif Spróbuj zastosować się do mojej rady.
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.