setting up ajax validation response - php

Question

My PHP code for a login form [this part located at the very top on my index.php where I have the login form] looks something like this:
if(isset($_POST['submit'])){
if (!isset($_POST['username'])) $error[] = "Please fill out all fields";
if (!isset($_POST['password'])) $error[] = "Please fill out all fields";
$username = $_POST['username'];
if ( $user->isValidUsername($username)){
if (!isset($_POST['password'])){
$error[] = 'A password must be entered';
}
$password = $_POST['password'];
if($user->login($username,$password)){
$_SESSION['username'] = $username;
header('Location: welcome.php');
exit;
} else {
$error[] = '<div style = "text-align:center">Wrong username/password or your account have not been activated </span>';
}
}else{
$error[] = '<div style = "text-align:center">Username required</span>';
}
and the HTML for the login form is like this:
<form role="form" method="post" action="" >
<?php
//check for any errors
if(isset($error)){
foreach($error as $error){
echo '<p class="bg-danger">'.$error.'</p>';
}
}
if(isset($_GET['action'])){
//check the action
switch ($_GET['action']) {
case 'active':
echo "<h2 class='bg-success'>Your account is now active you may now log in.</h2>";
break;
case 'reset':
echo "<h2 class='bg-success'>Please check your inbox for a reset link.</h2>";
break;
case 'resetAccount':
echo "<h2 class='bg-success'>Password changed, you may now login.</h2>";
break;
}
}
?>
<div class="form-group">
<p align="center">
<font face="Tahoma">Username:</font><font color="#FFFFFF">
</font>
<input type="text" name="username" id="username" class="form-control input-lg" value="<?php if(isset($error)){ echo htmlspecialchars($_POST['username'], ENT_QUOTES); } ?>" tabindex="1">
</div>
<br>
<div class="form-group">
<p align="center">
<font face="Tahoma">Password: </font><font color="#FFFFFF">
</font><input type="password" name="password" id="password" class="form-control input-lg" tabindex="3">
</div>
<br>
<div align="center">
<input type="submit" name="submit" value="Login" class="btn1" tabindex="5">
</div>
</form>
Now, as this form in submitted if there are ERRORS , it will refresh the whole page and back with error messages on right on top of the form fields. How would I be able to use AJAX / jQuery response to validate for ERRORS without refreshing the whole page. ONLY of there are ERRORS I want it pop the error messages without refreshing. And if it's SUCCESS, then it would log the user in. Can someone help me with this ?
I also have a errors.php file that has only this code in it:
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>
I get the concept behind setting up the AJAX method, but IDK how to use it on this code and form. Hope you guys can help.

Answer 1

This is a very broad question with many possible answers, but here's one way to do it.
1. Post your login with AJAX
$.post("loginScript.php", {
username: "username goes here",
password: "password goes here"
}, function(data){
});
2. Echo your results
Your login script should echo out a JSON response that indicates whether the login was successful and if not, what the errors were.
<?php
if(//login conditions)
{
echo json_encode(array(
"success" => true
));
}
else
{
echo json_encode(array(
"success" => false,
"errors" => $errors
));
}
3. Handle the response
$.post("loginScript.php", {
username: "username goes here",
password: "password goes here"
}, function(data){
var json = JSON.parse(data);
if(json.success)
{
//Login was successful
}
else
{
var errors = json.errors;
//Display errors on your page.
}
});