[PHP+jQuery+CSS] Ajax reagujący na zdarzenie onblur i modyfikujący css Opcje

[amii]

Chcę zrobić formularz rejestracji informujący usera czy wprowadził poprawne dane w zdarzeniu onblur dokładnie coś takiego jak tu:
http://www.forum.optymalizacja.com/index.p...mp;coppa_pass=1


To co wymyśliłem:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
         function ajax_check(input_value, input_name) {
         //dane poprawne sprawdzane alertem
 
                $.post("ajax_check.php",{checker:input_value, checker_name:input_name}, function(data) {
 
                    if(data) {  
                    $(this).removeClass('input').addClass('input_error');  //remove old class from input field and add error class
                    $('div#error_'+input_name).css({'display' : 'block'});
                    $('div#error_'+input_name).text(data);
                    $('#'+input_name+'_cross').css({'display' : 'block'});
                    }
                    else {
                    $(this).removeClass('input input_error').addClass('input_ok');  //remove old class from input field and add error class
                    $('#'+input_name+'_tick').css({'display' : 'block'});
                    }  
 
                });
 
         };
      </script>
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
<form name="login" id="login" action="index.php?p=register" method="post">
<fieldset>
<h1 class="log">Zarejestruj nowego użytkownika</h1><br>
 
<label><strong>Login:</strong></label>
<input class="input" name="konto" type="text" value="" maxlength="80" onblur="ajax_check(this.value, this.name)" />
<div id="error_konto">login</div>
<img src="img/aff_cross.gif" id="konto_cross" alt="cross" class="image_error">
<img src="img/aff_tick.gif" id="konto_tick" alt="tick" class="image_ok">
<br>
 
<label><strong>Hasło:</strong></label>
<input class="input" name="password" type="password" value="" maxlength="14" onblur="ajax_check(this.value, this.name)"/>
<div id="error_password">pass</div>
<img src="img/aff_cross.gif" id="password_cross" alt="cross" class="image_error">
<img src="img/aff_tick.gif" id="password_tick" alt="tick" class="image_ok">
<br>
 
<label>
<strong>Powtórz haslo:</strong></label>
<input class="input" name="password2" type="password" value="" maxlength="14" onblur="ajax_check(this.value, this.name)"/>
<div id="error_password2">pass2</div><img src="img/aff_cross.gif" id="password2_cross" alt="cross" class="image_error">
<img src="img/aff_tick.gif" id="password2_tick" alt="tick" class="image_ok"><br>
 
<label><strong>Podaj e-mail:</strong></label>
<input class="input" name="email" type="text" value="" onblur="ajax_check(this.value, this.name)" />
<div id="error_email">email</div>
<img src="img/aff_cross.gif" id="email_cross" alt="cross" class="image_error">
<img src="img/aff_tick.gif" id="email_tick" alt="tick" class="image_ok">
<br>
 
<br>
<input type="submit" value="Zarejestruj" class="button" />
<input type="submit" value="Cancel" class="button" />
</fieldset>
</form>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
//plik ajax_check.php
session_start();
require_once('functions.php');
$checker = clean($_POST['checker']);
$checker_name = clean($_POST['checker_name']);
 
   switch($checker_name) {
   case 'konto':
   if (strlen($checker) < 1 && strlen($checker) > 80) {
   echo 'Nazwa użytkonwika musi mieć od 1 do 80 znaków.';
   break;
   }
   $ile =mysql_query("SELECT * FROM `users` WHERE login = '$konto'");
   $ile = mysql_num_rows($ile);
   if ($ile==0) {
   echo '';
   }
   else {
   echo 'Użytkownik ' .$checker. ' już istnieje wybierz inną nazwę.';
   }
   break;
 
   case 'password':
   $_SESSION[$pass] = $checker;
   if (!checkUserPass($checker)) {
   echo 'Nazwa użytkonwika musi mieć od 3 do 14 znaków. I może się składać tylko ze znaków alfanumerycznych.';
   }
   else echo ''; 
   break;
 
   case 'password2':
   if ($checker !== $_SESSION[$pass]) {
   echo 'Hasła nie są takie same.';
   }
   else echo '';
   break;
 
   case 'email':
   if (!filter_var(trim($checker), FILTER_VALIDATE_EMAIL)) {
   echo 'Adres e-mail ma niepoprawny format.';
   }
   else echo '';
   break;
 
   default:
   echo 'Formularz zawiera niepoprawne lub niekompletne dane.';
 
   break;
   }
[PHP] pobierz, plaintext 

I jeszcze css nie mieszczący się w pierwszym poście

[CSS] pobierz, plaintext 
/* FORMAULARZE I INPUTY */
.input {
    border: 1px solid #006;
    background: #ffc;
    width: 330px;
}
 
.input:hover {
    border: 1px solid #f00;
    background: #ff6;
    width: 330px;
}
 
.input_error {
    border: 1px solid #FF0000;
    background: #ffc;
    width: 330px;
}
 
.input_error:hover {
    border: 1px solid #FF0000;
    background: #ff6;
    width: 330px;
}
 
.input_ok {
    border: 1px solid #00FF00;
    background: #ffc;
    width: 330px;
}
 
.input_ok:hover {
    border: 1px solid #00FF00;
    background: #ff6;
    width: 330px;
}
 
.image_error {
display: none;
position: relative;
left: 495px;
bottom: 35px;
}
 
.image_ok {
position: relative;
left: 495px;
bottom: 35px;
}
 
label {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: right;
}
br { clear: left; }
 
div#error_konto, div#error_password, div#error_password2, div#error_email {
display: none;
border: 1px solid #FF0000;
background: #FF9999;
width: 328px;
position: relative;
left: 158px;
bottom: 45px;
clear: both;
}
[CSS] pobierz, plaintext 

ok nieważne już działa zła ścieżka do pliku php i kilka innych drobiazgów

Ten post edytował amii 23.04.2011, 17:19:28