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;
}
?>
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'));
}
// $(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