Walidacja jquery + php + mysql, Walidacja jquery + php +mysql Opcje

[tomzoll]

Witam serdecznie.

Piszę skrypt, za pomocą którego będę dodawał do bazy danych nazwy użytkowników. Ponadto skrypt sprawdza w bazie danych, czy przypadkiem istnieje już taki użytkownik w bazie danych. Skrypt działa super w PHP, aczkolwiek docelowo chcę, żeby skrypt domyślnie był walidowany poprzez jquery. I tutaj problem bo nie wiem jak to ugryźć. Poniżej treść skryptów.

Plik signup.php oczywiście bez zbędnego kodu html

Kod

<?php
session_start();
  // Wstawianie nagłówka strony.
  $page_title = 'Rejestracja';
  require_once('header.php'); //Nagłówek strony wraz z deklaracją css oraz niezbędnymi skryptami - w nszym przypadku jquery + script.js
  require_once('appvars.php'); //pozostałe deklaracje
  require_once('connectvars.php'); //deklaracja stałych do połączenia z bazą
  $redirectURL = 'zarejestrowano.php';//przekierowanie do strony w sytuacji poprawnej rejestracji użytkownika
  $errors = array();//deklaracja tabicy do przechowywania błędów

//zmienna do połączenia z bazą
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME) or die('Error connecting to MySQL server.');

//w sytuacji, gdy kliknięto przycisk wyślij na formularzu pobieramy dane z formularza do zmiennych
  if (isset($_POST['submit'])) {
    // Pobieranie danych z tablicy POST.
    $login = mysqli_real_escape_string($dbc, trim($_POST['login']));
    $output_form = 'no';

//jeśli po kliknięciu wyślij jest pusty login
      if (empty($login))
      {
      // We know at least one of the input fields is blank
    $errors['login']='Proszę wpisać prawidłowy login.';
        $output_form = 'yes';
      }      
  }
  //w każdym innym przypadku wyświetl pusty formularz
  else
  {
    $output_form = 'yes';
  }
  // jeśli nie ma błędów w formularzu to
  if (!empty($login)) {
        
      // Sprawdzanie, czy dana nazwa nie jest już zajęta.
      $query = "SELECT * FROM users WHERE login = '$login'";
      $data = mysqli_query($dbc, $query);
      if (mysqli_num_rows($data) == 0) {        
        
    //jeśli nazwa nie jest zajęta to wpisujemy dane do bazy    
    $query = "INSERT INTO users (login, email, haslo1, imie, nazwisko, rejestracja)  VALUES ('$login', 'email', ('haslo'), 'Imię', 'Nazwisko', NOW())";
    mysqli_query($dbc, $query)
      or die ('Data not inserted.');

    echo '<p><strong>Dziękujemy za rejestrację. Twój login to:</strong> ' . $login . '<br />';
    
            // Usuwanie danych z formularza.
            $login = "";

    mysqli_close($dbc);
    exit();
  }
      else {
        // Dana nazwa jest już zajęta, dlatego należy wyświetlić komunikat o błędzie.
    $errors['login']='Wpisany login jest zajęty. Wpisz inny.';
        $login = "";
        $output_form = 'yes';
      }
  }
  
  //co wtedy, gdy zmienna output_form jest ustawiona na "yes"  
  if ($output_form == 'yes') {
?>

<div id="carbonForm">
    <h1>Rejestracja</h1>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="signupForm">
    <div class="fieldContainer">
        <div class="formRow">
            <div class="label">
                <label for="login">Login:</label>
            </div>
            
            <div class="field">
                <input type="text" name="login" id="login" value="<?php if (!empty($login)) echo $login; ?>" />
            </div>
        </div>          
    </div> <!-- Closing fieldContainer -->
    <div class="signupButton">
        <input type="submit" name="submit" id="submit" value="Zarejestruj" />
    </div>
    </form>  
</div>
<?php
  }

//Co w przypadku gdy w przeglądarce włączony jest JS
if($_POST['fromAjax'])
{
    if(count($errors))
    {
        $errString = array();
        foreach($errors as $k=>$v)
        {
            // The name of the field that caused the error, and the
            // error text are grouped as key/value pair for the JSON response:
            $errString[]='"'.$k.'":"'.$v.'"';
        }
        
        // JSON error response:
        die    ('{"status":0,'.join(',',$errString).'}');
    }
    
    // JSON success response. Returns the redirect URL:
    echo '{"status":1,"redirectURL":"'.$redirectURL.'"}';

    exit;
}

//Działanie w przypadku wyłączonej obsługi JS
if(count($errors))
{
    echo '<h2>'.join('<br /><br />',$errors).'</h2>';
    exit;
}
?>

Plik script.js - jquery

Kod

$(document).ready(function(){
    // $(document).ready() is executed after the page DOM id loaded
    
    
    // Binding an listener to the submit event on the form:
    $('#signupForm').submit(function(e){

        // If a previous submit is in progress:
        if($('#submit').hasClass('active')) return false;
        
        // Adding the active class to the button. Will show the preloader gif:
        $('#submit').addClass('active');
        
        // Removing the current error tooltips
        $('.errorTip').remove();
        
        // Issuing a POST ajax request to submit.php (the action attribute of the form):
        $.post($('#signupForm').attr('action'),$('#signupForm').serialize()+'&fromAjax=1',function(response){
            
            if(!response.status)
            {
                // Some kind of input error occured
                
                // Looping through all the input text boxes,
                // and checking whether they produced an error
                $('input[type!=submit]').each(function(){
                    var elem = $(this);
                    var id = elem.attr('id');
                    
                    if(response[id])
                        showTooltip(elem,response[id]);
                });
            }
            else location.replace(response.redirectURL);
            
            $('#submit').removeClass('active');
        },'json');
        
        e.preventDefault();
    });
    
    $(window).resize();
});

// Centering the form vertically on every window resize:
$(window).resize(function(){
    var cf = $('#carbonForm');
    
    $('#carbonForm').css('margin-top',($(window).height()-cf.outerHeight())/2)
});

// Helper function that creates an error tooltip:
function showTooltip(elem,txt)
{
    // elem is the text box, txt is the error text
    $('<div class="errorTip">').html(txt).appendTo(elem.closest('.formRow'));
}

Z góry dziękuję za pomoc przy poprawie pliku JS.

Pozdrawiam

[lukesh]

Cześć! Robiłem ostatnio własnie taki skrypt. Poniżej zamieszczę moje szkice. Jak chcesz - zerknij, jak ja to wszystko rozwiązalem. Najpierw podajesz dane w formularzu, potem skrypt przesyła dane do serwera za pomocą jQuery/AJAX i odbiera dane ze skrptu PHP w formie JSON, analizuje je i zmienia, jeśli coś trzeba zmienić, a jeśli wszystko jest OK, odsyła użytkownika na inną stronę.

Formularz:

[HTML] pobierz, plaintext 
<form>
    <div class="msgbox">Konto zostało utworzone!<br />Na Twój adres e-mail został wysłany list z linkiem aktywującym.</div>
    <div><label>Użytkownik:</label><input type="text" id="name" name="name" /></div>
    <div class="errorbox" id="nameerrorbox"></div>
    <div><label>Mail-Addresse:</label><input type="text" id="email" name="email" /></div>
    <div class="errorbox" id="emailerrorbox"></div>
    <div><label>Passwort:</label><input type="password" id="password" name="password" /></div>
    <div class="errorbox" id="passworderrorbox"></div>
    <div><img src="img/loader.gif" id="loader" style="display:block;margin: 0 auto;visibility:hidden;" alt="loader" /></div>
    <div><input type="submit" value="Account erstellen" /></div>
</form>
[HTML] pobierz, plaintext 

Skrypt JS (na tej samej stronie, co formularz):

[HTML] pobierz, plaintext 
<script>
    $(document).ready(function(){
        $('form').submit(function(e){
            e.preventDefault();
            $('#loader').css('visibility', 'visible');
            $.post('app.php?do=signup', $('form').serialize(), function(data){
                try{
                    var obj = jQuery.parseJSON(data);
                    process(obj);
                }catch(e){
                    alert(data);
                    $('#loader').css('visibility', 'hidden');
                }
                function process(obj){
                    if(obj.error){
                        if(typeof obj.email != 'undefined'){
                            $('#emailerrorbox').html(obj.email);
                            $('#email').addClass('error');
                        }else{
                            $('#email').addClass('ok');
                            $('#emailerrorbox').empty();
                        }
                        if(typeof obj.password != 'undefined'){
                            $('#passworderrorbox').html(obj.password);
                            $('#password').addClass('error');
                        }else{
                            $('#password').addClass('ok');
                            $('#passworderrorbox').empty();
                        }
                        if(typeof obj.name != 'undefined'){
                            $('#nameerrorbox').html(obj.name);
                            $('#name').addClass('error');
                        }else{
                            $('#name').addClass('ok');
                            $('#nameerrorbox').empty();
                        }
                        $('#loader').css('visibility', 'hidden');
                    }else{
                        if(obj.db == 'success'){
                            $('form :input').attr('disabled', true);
                            $('form input').addClass('ok');
                            $('.errorbox').empty();
                            $('#loader').css('visibility', 'hidden');
 
                            $('.msgbox').slideDown();
                        }else{
                            alert(obj.db);
                            $('#loader').css('visibility', 'hidden');
                        }
                    }
                }
            });
        });
    });
</script>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
// ARE ALL VALUES SET?
if (!isset($_POST['email']) && !isset($_POST['password']) && !isset($_POST['name'])){die();}
// ================================================================================
====================
// error STATUS
$data['error'] = false;
// E-MAIL VALIDATION
if ($_POST['email']){
    if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
        $data['error'] = true;
        $data['email'] = 'Podaj prawidłowy adres email!';
    }else{
        // $email VARIABLE
        $email = $_POST['email'];
        connect();
        $sql = mysql_query("SELECT COUNT(*) FROM users WHERE email='$email' LIMIT 1");
        if (mysql_result($sql, 0) > 0){
            $data['error'] = true;
            $data['email'] = 'Ten adres e-mail jest już w bazie!';
        }
    }
}else{
    $data['error'] = true;
    $data['email'] = 'Podaj adres e-mail!';
}
// PASSWORD VALIDATION
if ($_POST['password']){
    if(strlen($_POST['password']) < 3){
        $data['error'] = true;
        $data['password'] = 'Hasło powinno składać się z przynajmniej 3 znaków!';
    }else{
        // $password VARIABLE
        $password = md5($_POST['password']);
    }
}else{
    $data['error'] = true;
    $data['password'] = 'Podaj hasło!';
}
// NAME VALIDATION
if ($_POST['name']){
    if(!preg_match('~^[a-ząęćłńśźżA-ZĄĘĆŁŃŚŹŻ0-9_-\s]{3,32}$~u', $_POST['name'])){
        $data['error'] = true;
        $data['name'] = 'Niepoprawna nazwa użytkownika!';
    }else{
        // $name VARIABLE
        $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
        connect();
        $sql = mysql_query("SELECT COUNT(*) FROM users WHERE name='$name' LIMIT 1");
        if (mysql_result($sql, 0) > 0){
            $data['error'] = true;
            $data['name'] = 'Wybrana nazwa użytkownika jest już zajęta!';
        }
    }
}else{
    $data['error'] = true;
    $data['name'] = 'Podaj swoje imię lub pseudonim!';
}
// ================================================================================
====================
// VALIDATION
if ($data['error']){
    echo json_encode($data);
}else{
    connect();
    // $confirmcode VERIABLE
    $regdate = date("Y-m-d");
    $confirmcode = md5(uniqid(rand(), true));
    $sql = mysql_query("INSERT INTO users (email, password, name, regdate, status, confcode) VALUES ('$email', '$password', '$name', '$regdate', 0, '$confirmcode')");
    if ($sql){
        $subject = 'Witaj w serwisie imemo.pl!';
        $message = 'Dziękujemy za rejestrację w serwisie http://...............pl!'
        ."\r\n\r\n".'Kliknij w poniższy link, aby potwierdzić swój adres e-mail:'
        ."\r\n\r\n".'http://................pl/?go=signin&confirm='."$confirmcode";
        $headers = "Content-type: text/plain; charset=utf-8\r\n";
        $headers .= 'From: kontakt@................pl' . "\r\n" .
        'Reply-To: kontakt@................pl' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
        mail($email, $subject, $message, $headers);
        $data['db'] = 'success';
        echo json_encode($data);
    }else{
        $data['db'] = 'Wystąpił błąd bazy danych. Spróbuj ponownie!';
        echo json_encode($data);
    }
}
?>
[PHP] pobierz, plaintext 

Powyższy skrypt tworzy tablicę, w której jest wartość error. Dodatkowo są dodawane informacje o konkretnych błedach. W JS, jeśli error=true, skrypt sprawdza, czy np. istnieje wartość password i jeśli tak, to znaczy, że hasło nie przeszło walidacji, dlatego zmienia się styl dla tego pola (dodaję czerwoną kropkę, a jak jest ok - zielony znaczek) i wyświetla się odpowiednia iformacja pod polem hasła.

Nie mogę zagwarantować, że nie ma tu żadnych błędów, ale u mnie działało dobrze.

Taki skrypt daje fajnie wyglądający efekt, tylko pytanie - po co? Moim zdaniem, to trochę za dużo grzebania się w kodzie, który do strony nie wnosi zbyt wiele. Teraz myśle to zmienić na normalny formularz ze zmienną POST. Ajax można zostawić, ale np. do sprawdzania, czy dana nazwa użytkownika/email są już zajęte. Wydaje mi się to bardziej praktycznie.

Poza tym, zauważyłem, że jeśli serwer zwalnia z jakiegoś powodu albo połęczenie internetowe niedomaga, użytkownik może się zastanawiać, czy coś się dzieje, czy nie... W przypadku przekierowania do innego pliku, każdy widzi, że coś się dzieje. Niby czasami takie skrypty oparte o AJAXa działają szybciej, ale ogólne wrażenie może pozostać, że wszystko dzieje się wolniej. Własnie przez to, że nie widać, żeby coś się zmieniało; nie widać, żeby ładowała się jakaś strona.