How to dynamically show error messages through PHP

Question

I am creating a PHP login script. So far I have only worked on the registration.

My question is, how can I handle validation in PHP without refreshing the page? I want to output the feedback that the user has entered information wrongly, but I don't want to refresh the page. This is because I am using AJAX, so I want it to output on the page.

Is this possible?

See here, if you "sign up" without filling in any of the boxes it shows you some error messages. The problem is that it reloads the page as it does it. Is there a way to not reload the page and still show this data?

http://marmiteontoast.co.uk/fyp/login-register/test/index.php

This is an example of the if statement for just the username. This is repeated with all the other fields too:

if(isset($_POST['username'])){
    $username = mysql_real_escape_string(trim($_POST['username']));
    if(strlen($username) > 3){
        // passed
        if(strlen($username) < 31){
        // passed
        } else {
        $_SESSION['status']['register']['error'][] = 'The Username is greater than 30 characters.';
        }
        } else {
        $_SESSION['status']['register']['error'][] = 'The username is less than 4 characters.';
        }
        } else {
        $_SESSION['status']['register']['error'][] = 'The Username is not entered.';
        }

Once it passes all the validation it does:

header('Location:index.php');

And the errors are output on the index page by:

<?php
if(isset($_SESSION['status']['register']['error'])){
?>
 <div class="alert alert-error">
 <p><strong>There's a problem!</strong><br /><br />
<?php
 foreach($_SESSION['status']['register']['error'] as $error){
 // Outputs list of all errors, breaks to new line
 echo $error . '<br />';
}
?>
</p>

1. Is it possible to output these dynamically with PHP?

2. Could I do the validation on the front end, then just pass it to the PHP to pass to the database?

2a. How would I handle running a username exists check if I do it front end?

Answer 1

This is something I actually just made the other day!

I have a file called "register.js", a file called "register_process.php" and some html.

How my server is set up:

html_docs (www):
   ajax:
       register_process.php
   js:
       register.js
       jquery-1.6.2.js
   register.html

so within my register.html, my code looks like such:

<script type="text/javascript" src="js/md5.js"></script> <!-- this is in my head -->
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<!-- everything else is in my body -->
<div id="error_message" style="display: none;">

</div>
<div id="register_div">
   <input type="text" name="username" id="username"><br>
   <input type="password" name="password" id="password"><br>
   <input type="submit" name="submitbutton" id="reg_button" value="Register" onclick="AttemptRegisterAjax(); return false;"><br>
</div>

This calls the function inside of my register.js file. That functions looks like such:

function AttemptAjaxRegister(){
    var url = "ajax/register_process.php?";
    url += "time=" + (new Date().getTime()) + "&un=";
    var username_ele = document.getElementById("reg_username");
    var password_ele = document.getElementById("reg_password");
    var error_ele = document.getElementById("error_message");
    var username = username_ele.value;
    var password = password_ele.value;
    if((username.length >=4) && (password.length >= 4)){
        url += encodeURIComponent(username) + "&pw=" + encodeURIComponent(password);
        console.log(url);
        $.get(url, function(data, status, xhr){
            data = data.trim();
            if(data != "true"){
                error_ele.innerText = data;
                error_ele.style = "display: block;";
            }else{
                window.location = "/profile.php";
            }
        });
    }else{
        error_ele.innerText = "Please make sure your password and username are both 4 characters long";
        error_ele.style = "display: block;";
    }
}

now, inside of your php, you'll want to set everything up just like how you had it to register, but you'll want to actually just call die($YourErrorMessage); or if the registration was successful, die("true");

Answer 2

1. Not directly, you will need to use another tool for that, most likely Javascript.

2. Yes but that would be a terible practice. the best way to validate on both.

   2a. I believe you would need to use a database.

thsi tutorials might help you out.

Easy jQuery Ajax PHP Contact Form

How to create a Sign Up form registration with PHP and MySQL