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