Form validation using AJAX with PHP fallback

Question

I've used this PHP/AJAX method of validation for a bit, but I think it could use a little peer review. The basic idea was to create a way of verifying forms in a nice manor using AJAX, but also fall-back to PHP when the user disables JavaScript.

One extra note: jQuery is used throughout the JavaScript files.

field_validation.php

if (isset($_POST['field']) && isset($_POST['value'])) {
    require_once('includes/functions.php'); // Allows connection to the database
    $field = $_POST['field'];
    $value = $_POST['value'];
    echo validate_input($field, $value);
}

function validate_input($field, $input) {
    switch ($field) {
        case 'email':
            if ($input != '') {
                // We need the validate_email() function, so we now require the file with it in. (Not included as I'm happy with it's validation and this is only used as an example)
                require_once ('validate_email.php');
                if (validate_email($input) == false) {
                    return 'Please enter a valid email';
                }
            } else {
                return 'Please enter an email';
            }
            // Check email address is not already taken
            $db = mysqlConnect();
            $stmt = $db->stmt_init();
            $stmt->prepare("SELECT EXISTS(SELECT 1 FROM users WHERE email  = ?)");
            $stmt->bind_param('s', $input);
            $stmt->execute();
            $stmt->bind_result($alreadyTaken);
            $stmt->fetch();
            $stmt->close();
            $db->close();
            if ($alreadyTaken) {
                return 'Email address already in use, you cannot sign up again';
            }
            return true;
            break;
        case 'password':
            if (strlen($input) <= 6) {
                return 'Please enter a password more than 6 characters in length';
            }
            return true;
            break;
        case 'twitter':
            if (strlen($input) < 1 ) {
                return true;
            }
            if (strlen($input) >= 16) {
                return 'Twitter Usernames cannot be more than 15 cahraters in length (excluding the @ symbol)';
            }
            $apiurl = 'http://api.twitter.com/1/users/show.xml?screen_name=' . $input;
            if (!@fopen($apiurl, 'r'))
            {
                return 'Username does not exist, please enter a valid username';
            }
            // Check twitter name is not already taken
            $db = mysqlConnect();
            $stmt = $db->stmt_init();
            $stmt->prepare("SELECT EXISTS(SELECT 1 FROM users WHERE twitter  = ?)");
            $stmt->bind_param('s', $input);
            $stmt->execute();
            $stmt->bind_result($alreadyTaken);
            $stmt->fetch();
            $stmt->close();
            $db->close();
            if ($alreadyTaken) {
                return 'Twitter name already in use, please chose another name';
            }
            return true;
            break;
        case 'displayname':
            if (strlen($input) < 1) {
                return 'Please enter a Display Name';
            }
            if (strlen($input) > 64) {
                return 'Please enter a Display Name shorter than 65 charaters';
            }
            $db = mysqlConnect();
            $stmt = $db->stmt_init();
            $stmt->prepare("SELECT EXISTS(SELECT 1 FROM users WHERE display_name  = ?)");
            $stmt->bind_param('s', $input);
            $stmt->execute();
            $stmt->bind_result($alreadyTaken);
            $stmt->fetch();
            $stmt->close();
            $db->close();
            if ($alreadyTaken) {
                return 'Display Name already in use, please chose another name';
            }
            return true;
            break;
        case 'termsandconditons':
            if ($input != 'on') {
                return 'You must accept the Terms and Conditions';
            }
            return true;
            break;
        default:
            return true;
            break;
    }
}
function showErrors($errors) {
    ?>
    <div id="errors">
        Errors<br>
        <ul>
            <?
            for ($i = 0; $i < count($errors); $i++) {
                if (isset($errors[$i]['name'])) {
                    // Highlight the field
                    ?>
                    <script>
                        var cross = '<img src="/images/cross.png">';
                        $(document).ready(function(){
                            $('#<? echo $errors[$i]['name']; ?>hint').html(cross);
                        });
                    </script>
                    <?
                }
                ?>
                <li>
                    <? echo $errors[$i]['message']; ?><br >
                </li>
                <?
            }
            ?>
        </ul>
    </div>
    <?
}

This is included in each of the pages that require validation. I have removed some of the extra cases since they are pretty much the same as the ones shown.

validatefields.js

var cross = '<img src="/images/cross.png">';
var tick = '<img src="/images/tick.png">';
var loading = '<img src="images/loading.gif">';

// Send the data from the form to the PHP file 'jqueryvalidate.php', where they will call the function to validate the data
$('input:text,input:password,input[type=email]').blur(function() {
    // Get the input from the form
    var fieldid = $(this).attr('id');
    var fieldvalue = $(this).attr('value');
    $('#' + fieldid + 'hint').html(loading);
    $.ajax ({
        url: 'field_validation.php',
        data: {field: fieldid, value: fieldvalue},
        type: 'post',
        cache: false,
        success: function(message) {
            if (message != true) {
                // Error was returned, show a cross
                $('#' + fieldid + 'hint').html(cross + message);
            } else {
                // No error, show a tick
                $('#' + fieldid + 'hint').html(tick);
            }
        }
    });
});

$('input:checkbox').click(function() {
    // Get the input from the form
    var fieldid = $(this).attr('id');
    if ($(this).attr('checked') == 'checked') {
        var fieldvalue = 'on';
    } else {
        var fieldvalue = 'off';
    }
    $('#' + fieldid + 'hint').html(loading);
    $.ajax ({
        url: 'jqueryvalidate.php',
        data: {field: fieldid, value: fieldvalue},
        type: 'post',
        cache: false,
        success: function(message) {
            if (message != true) {
                // Error was returned, show a cross
                $('#' + fieldid + 'hint').html(cross + message);
            } else {
                // No error, show a tick
                $('#' + fieldid + 'hint').html(tick);
            }
        }
    });
});

As you can see, this has two different functions for the validation: one for text, password and email fields and another for checkboxes. Could this be tidied up a little?

Finally, an example form (mypage.php)

if($_SERVER['REQUEST_METHOD'] == "POST") {
    $errors = array();
    // Form has been submitted
    foreach($_POST as $key => $value) {
        $$key = $value; // Set the title of the field to its name
        if (validate_input($key, $value) != 'true') {
            // Value is invalid
            $error['message'] = validate_input($key, $value);
            $error['name'] = $key;
            array_push($errors, $error);
        }
    }
    if (!isset($_POST['termsandconditions'])) {
// This could be improved
            if (validate_input('termsandconditions', 'off') != 'true') {
                // Value is invalid
                $error['message'] = validate_input('termsandconditions', 'off');
                $error['name'] = 'termsandconditions';
                array_push($errors, $error);
            }
        }
        if (count($errors) > 0) {
            // Input data failed validation
            showErrors($errors);
        } else {
    // The form has successfully validated
    }
    <form action="mypage.php" method="POST">
        <label for="displayname">*Display Name: </label>
        <input type="text" name="displayname" id="displayname" <? if (isset($_POST['displayname'])) echo 'value="' . $_POST['displayname'] . '"' ?> ><br>
        <div id="displaynamehint"></div><br>
        <label for="email">*Email: </label>
        <input type="email" name="email" id="email" <? if (isset($_POST['email'])) echo 'value="' . $_POST['email'] . '"' ?> ><br>
        <div id="emailhint"></div><br>
        <label for="password">*Password: </label>
        <input type="password" name="password" id="password"><br>
        <div id="passwordhint"></div><br>
        <label for="twitter">Twitter Username: </label>
        <span class="twitterinput">@<input type="text" name="twitter" id="twitter" <? if (isset($_POST['twitter'])) echo 'value="' . $_POST['twitter'] . '"' ?> ></span><br>
        <div id="twitterhint"></div><br>
        <input type="checkbox" name="termsandconditions" id="termsandconditions" <? if (isset($_POST['termsandconditions'])) echo 'checked="checked"'?> ><label for="termsandconditions">*I have fully read, understand and agree to <a href="termsandconditions.php" target="_blank">the terms and conditions</a></label><div id="termsandconditionshint"></div><br>
        <input type="submit" name="submit" value="Submit">
    </form>

Answer 1

Code Separation

Break up your functions! That has got to be the largest function I've ever seen!

There's no reason to type that MySQL block over and over again. Make it a function and it will go a long way towards cleaning this up.

function alreadyTaken($input, $where) {
    $db = mysqlConnect();
    $stmt = $db->stmt_init();
    $stmt->prepare("SELECT EXISTS(SELECT 1 FROM users WHERE $where = ?)");
    $stmt->bind_param('s', $input);
    $stmt->execute();
    $stmt->bind_result($alreadyTaken);
    $stmt->fetch();
    $stmt->close();
    $db->close();
    return $alreadyTaken;
}

I'm still not thrilled with the extra large switch statement and would suggest making the code in each of those cases their own function. Sure, you aren't going to reuse them, but at least it will be cleaner. Also, if all of your cases return true if nothing is wrong, you can just end the validate_input() function with return true; and remove all those other return true; statements. Then you can remove the default case because that eventuallity would already be covered.

Sanitizing As Well As Validating

If your PHP version is >= 5.2 you can use PHP's filter_var() or filter_input() function to sanitize your user input. You should always sanitize your user input before using it. Never trust it. If you do not have PHP >= 5.2 you'll have to look around for the best way of sanitizing your input.

PHP Short Tags

Some servers do not accept PHP short tags. You should always expand <? to <?php for compatibility.

Foreach > For

No need to use a for loop for what you can more easily do with a foreach loop. I would rewrite your showErrors() function to something more like this...

function showErrors($errors) {
?>
    <script>
        var cross = '<img src="/images/cross.png">';
        $(document).ready(function(){
<?php foreach(array_keys($errors) as $name) { echo "$('#{$name}hint').html(cross);"; } ?>
        });
    </script>
    <div id="errors">
        Errors<br />
        <ul>
<?php foreach($errors as $message) { echo "<li>$message</li>"; } ?>
        </ul>
    </div>
<?php
}

Not to say this works 100%. I haven't tested it myself, but it should. I'm unclear about the JQuery because I haven't done much with it, but from what I remember it should still work. If not you should only have to recreate that function, not the cross variable and script blocks. You probably wont even need the cross variable as you do indeed define it again on the next script "validatefields.js".

Also, after coming to the end of your scripts I noticed that you always set $error['name']. Why do you check if it is set? Remove the isset() if it is not necessary I wrote the above revision to showErrors() with this in mind...

Variable Templates

You can do this in PHP too, not just JavaScript. Those links are to their respective documentation pages.

var template = '<img src="/images/%s">';

var cross = sprintf(template, 'cross.png');
var tick = sprintf(template, 'tick.png');
var loading = sprintf(template, 'loading.gif');

I'm not going to look at the rest of your JavaScript as it appears to be mostly JQuery and I'm too unfamiliar with that to lend a hand. You'll have to get someone else to help you with that.

getError Function and Variable Comparisons

if (validate_input($key, $value) != 'true')

Does indeed return as you would expect, but only because none of your statements returns a string with the value of "true". What you have now is not a boolean comparison but a string comparison. != and == are for loose comparison where the string "true" (or any other none empty string or non "false" string) is equivalent to boolean TRUE. !== and === are for absolute comparison, where only two variables of the same type with the same value ever return TRUE ("true" is not true). It should be written with an absolute comparison because what you are looking for is not the string "true" but the boolean TRUE.

if (validate_input($key, $value) !== true)

Now, because you seem to set your errors the same every time I would make it a function to reduce the need to type it.

function getError($name, $message) {
    $error = array();

    $error['message'] = validate_input('termsandconditions', 'off');
    $error['name'] = $name;

    return $error;
}

Finally, since you reuse the same validate_input() line for your error message, if it has one, I would set it as a variable before the if statement and then check the variable before setting the error with the new getError() function.

$isValid = validate_input($key, $value);
if($isValid !== true) { array_push($errors, getError($key, $isValid)); }

Variable Variables

$$key = $value; // Set the title of the field to its name

$$key is a variable variable. And most people agree that these are bad. Not only are they almost impossible to spot (I almost missed it) but they are impossible to document. No IDE that I know of will even recognize them. Not only that, but you don't even use it as far as I can tell. My advice, stay away from variable variables. They only cause headaches.