Forum PHP.pl > [JavaScript][AJAX] Walidacji formularza jQuery

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][AJAX] Walidacji formularza jQuery

przemilke

23.07.2008, 21:57:21

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 
<script type="text/javascript" src="library/jquery.js"></script>
<script type="text/javascript" src="library/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function () {
		$('#form_test').ajaxForm({
		        target: '#list',
	            beforeSubmit: validateForm
	    });
});
 
function validateForm(){
    $("#tekst_error").empty().hide(); 
 
	var imie_klienta = $("#tekst").val();
	var errors = 0;
 
	if (imie_klienta == null || imie_klienta == '') 
    { 
        $("#tekst_error").show().append("Pole Imie jest wymagane"); 
        errors++; 
    }
 
	if (errors > 0) 
    { 
        alert ("Znaleziono bledy"); 
        return false; 
    } 
}
</script>
 
</head>
 
<body>
</form>
<form id="form_test" name="form_test" method="post" action="indor.php">
<input name="tekst" type="text" class="box" id="tekst" size="30" maxlength="50"><br /><p id="tekst_error"></p>
<br /><input class="box" name="btnStep1" type="submit" id="btnStep2" value="Dalej">
</form>
<p id="list">Tutaj powinien pokazać sie zdefiniowany tekst po wysłaniu z indora php</p>
</body>
</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/

nexis

24.07.2008, 00:07:17

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

index.html

[PHP] pobierz, plaintext 
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
	  <title>Walidacja</title>
	  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	  <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js"></script>
	  <script type="text/javascript" src="validate.js"></script>
   </head>
   <body>
	  <span id="tekst_error"></span>
	  <span id="list"></span>
	  <form id="form_test" method="post" action="skrypt.php"> 
		 <input type="text" name="tekst" id="tekst" /><br />
		 <input type="submit" id="submit" value="Dalej" />
	  </form>
   </body>
</html>
?>
[PHP] pobierz, plaintext

validate.js

[PHP] pobierz, plaintext 
<?php
function validateForm(){
   $("#tekst_error").empty();
   var imie_klienta = $("#tekst").val();
   var errors = 0;
   
   if (imie_klienta == null || imie_klienta == "") {
	  $("#tekst_error").text("Pole Imie jest wymagane");
	  errors++;
   }
 
   if (errors > 0) {
	  alert ("Znaleziono bledy");
	  return false;
   }
}
 
$(document).ready(function(){
   $('#form_test').ajaxForm({
	  beforeSubmit: validateForm	  
   });
});
?>
[PHP] pobierz, plaintext

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

[PHP] pobierz, plaintext 
<?php
$(document).ready(function(){
   $("#form_test").submit(function(){
	  var imie = $("#tekst").val();
	  if (null == imie || "" == imie) {
		 $("#tekst_error").text("Blad!");
		 return false;
	  }	  
   });
});
?>
[PHP] 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.