Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][AJAX] Walidacji formularza jQuery
przemilke
post 23.07.2008, 21:57:21
Post #1





Grupa: Zarejestrowani
Postów: 28
Pomógł: 0
Dołączył: 3.01.2007

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

Witam,

Zabieram się właśnie za walidację formularza w jQuery. Nie wychodzi mi jednak typowy przykład szkoleniowy, a mianowicie nie dochodzi do walidacji i formularz jest zawsze wysyłany. Czy ktoś wie na czym polega mój błąd/przeoczenie. Oto kawałek króciutkiego kodu (Czy wogóle ktoś z Was korzystał z jquery.form.js):

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="library/jquery.js"></script>
  2. <script type="text/javascript" src="library/jquery.form.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function () {
  5. 		$('#form_test').ajaxForm({
  6. 		        target: '#list',
  7. 	            beforeSubmit: validateForm
  8. 	    });
  9. });
  10.  
  11. function validateForm(){
  12.     $("#tekst_error").empty().hide(); 
  13.  
  14. 	var imie_klienta = $("#tekst").val();
  15. 	var errors = 0;
  16.  
  17. 	if (imie_klienta == null || imie_klienta == '') 
  18.     { 
  19.         $("#tekst_error").show().append("Pole Imie jest wymagane"); 
  20.         errors++; 
  21.     }
  22.  
  23. 	if (errors > 0) 
  24.     { 
  25.         alert ("Znaleziono bledy"); 
  26.         return false; 
  27.     } 
  28. }
  29. </script>
  30.  
  31. </head>
  32.  
  33. <body>
  34. </form>
  35. <form id="form_test" name="form_test" method="post" action="indor.php">
  36. <input name="tekst" type="text" class="box" id="tekst" size="30" maxlength="50"><br /><p id="tekst_error"></p>
  37. <br /><input class="box" name="btnStep1" type="submit" id="btnStep2" value="Dalej">
  38. </form>
  39. <p id="list">Tutaj powinien pokazać sie zdefiniowany tekst po wysłaniu z indora php</p>
  40. </body>
  41. </html
[HTML] pobierz, plaintext


Biblioteki jquery.js i jquery.form.js implementuje prawidłowo.
A może jest inny sposób walidacji form w jQuery... Chodzi o to, aby formularz nie został wysłany z błędnymi danymi...
Piszcie, dzięki za pomoc

Dopowiem jeszcze, że beforeSubmit ma nie doprowadzić do wysłania formularza, bo zwraca argument false, ale wyglada na to, ze skrypt nie wchodzi wogole w funkcje validateForm() (próbowalem z alertami)...

Składnia jest zgodna z przykładem: http://jetlogs.org/2007/07/22/jquery-input...th-form-plugin/

Ten post edytował przemilke 23.07.2008, 21:41:36
Go to the top of the page
+Quote Post
nexis
post 24.07.2008, 00:07:17
Post #2





Grupa: Zarejestrowani
Postów: 1 012
Pomógł: 109
Dołączył: 26.09.2003
Skąd: nexis.pl

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

Chyba jednak coś namieszałeś, bo mi jedynie po poprawkach kosmetycznych działa:

index.html
[PHP] pobierz, plaintext 
  1. <?php
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.    <head>
  5. 	  <title>Walidacja</title>
  6. 	  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  7. 	  <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js"></script>
  8. 	  <script type="text/javascript" src="validate.js"></script>
  9.    </head>
  10.    <body>
  11. 	  <span id="tekst_error"></span>
  12. 	  <span id="list"></span>
  13. 	  <form id="form_test" method="post" action="skrypt.php"> 
  14. 		 <input type="text" name="tekst" id="tekst" /><br />
  15. 		 <input type="submit" id="submit" value="Dalej" />
  16. 	  </form>
  17.    </body>
  18. </html>
  19. ?>
[PHP] pobierz, plaintext


validate.js
[PHP] pobierz, plaintext 
  1. <?php
  2. function validateForm(){
  3.    $("#tekst_error").empty();
  4.    var imie_klienta = $("#tekst").val();
  5.    var errors = 0;
  6.    
  7.    if (imie_klienta == null || imie_klienta == "") {
  8. 	  $("#tekst_error").text("Pole Imie jest wymagane");
  9. 	  errors++;
  10.    }
  11.  
  12.    if (errors > 0) {
  13. 	  alert ("Znaleziono bledy");
  14. 	  return false;
  15.    }
  16. }
  17.  
  18. $(document).ready(function(){
  19.    $('#form_test').ajaxForm({
  20. 	  beforeSubmit: validateForm	  
  21.    });
  22. });
  23. ?>
[PHP] pobierz, plaintext


Możesz to też śmiało załatwić sprawę bez dodatku jQuery Form:

[PHP] pobierz, plaintext 
  1. <?php
  2. $(document).ready(function(){
  3.    $("#form_test").submit(function(){
  4. 	  var imie = $("#tekst").val();
  5. 	  if (null == imie || "" == imie) {
  6. 		 $("#tekst_error").text("Blad!");
  7. 		 return false;
  8. 	  }	  
  9.    });
  10. });
  11. ?>
[PHP] pobierz, plaintext


Ten post edytował nexis 24.07.2008, 00:20:07


--------------------
Zend Certified Engineer

Kliknij POMÓGŁ jeśli moja odpowiedź okazała się użyteczna!
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 Wersja Lo-Fi Aktualny czas: 12.07.2025 - 21:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn