在PHP中处理jQuery UI对话框表单

Question

I've been searching around on this for a couple of days, but haven't found any answers that fit my particular problem. Some background:

I am fairly new at PHP, and am attempting to create user log-in functionality on a practice site I set up using HTML, CSS and jQuery. I have a form that is displayed by a jQuery UI dialog, with fields for username and password. What I want to do is have the "Log In" button in the dialog submit the form to a separate file, "login.php", for validation and processing. If the username exists in the MySQL database, I want it to return an error message that I can display in the same dialog. Same goes for if the username exists, but the password is wrong.

If the validation succeeds, I want the PHP file to set session variables, and redirect to index.php.

This may be a simple error, or a number of them on my part, but I do not know which direction to go at this point. Any assistance would be greatly appreciated. The code is as follows (header.php):

 <script>
    $(function() {
        var name = $("#userid"),
        password = $("#pw"),
        loginFields = $([]).add(name).add(password);

        $("#login_link").click(function() {
            $("#login_dialog").dialog("open"); 
        });

        $("#login_dialog").dialog({
            autoOpen: false,
            height: 200,
            width: 250,
            modal: true,
            buttons: {
                Submit: function() {                            
                            $("#login_form").submit();
                        },
                Cancel: function(){
                    $(this).dialog("close");
                }                
            },
            close: function() {
                loginFields.val("");
            }
        });

    });
</script>
    <div id="banner">
        <h1>Header</h1>
        <span id="user">
            <ul>
                <?php
                    //if user is logged in, show name and Log Out option, else show Log In and Sign Up options
                    if(isset($_SESSION["user"])) {
                        echo "<li>Welcome " . $_SESSION["fname"] . "!<li>";
                        echo "<li><a href='#'>Log Out</a></li>";
                    } else {
                        echo "<li><a href='#' id='login_link'>Log In</a></li>";
                        echo "<li><a href='#'>Sign up</a></li>";
                    }
                ?>
            </ul>
        </span>
    </div>

    <nav id="mainnav">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </nav>

    <div id="login_dialog" title="Current User">
        <form id="login_form" action="login.php" method="post">
            <fieldset>
                <label for="userid">Username</label>
                <input type="text" name="userid" id="userid" />
                <label for="pw">Password</label>
                <input type="password" name="pw" id="pw" />
            </fieldset>
        </form>
    </div>

The PHP, right now a collection of interacting functions, is as follows:

<?php

function connect() {
    $con = mysqli_connect("localhost", "site", "blargh");

    if (mysqli_connect_errno()) {
        alert("Failed to connect to MySQL: " . mysqli_connect_error());
    }

    return $con;
}

function getUser($username, $password) {
    $con = connect();
    $result = mysqli_query($con, "SELECT * FROM practice_user
                           WHERE username = " . $username . " AND password = " . $password);

    return $result;
}

function setSessionUser($userData) {

    $_SESSION["username"] = $userData["username"];
    $_SESSION["fname"] = $userData["first_name"];
    $_SESSION["lname"] = $userData["last_name"];
}

//validation functions

function userExists($username, $password) {
    $con = connect();

    $result = getUser($username, $password);

    if (mysqli_num_rows($result) == 1) {
        return true;
    }
    else {
        return false;
    }
}



?>

Answer 1

If you are good with client side validation, you can do like:

Submit: function() {                            
    if($("#login_form").valid()) {
        $("#login_form").submit();
    }                   
}

Else, if you are looking for server side validation as you mentioned by using login.php, you have to work out on that file as well:

Submit: function() {                            
    validationCheck = $.post(
        'login.php', 
        {
            username:$('#userid').val(), 
            password:$('#pw').val()
        }
    );
    if(validationCheck) {
        $("#login_form").submit();
    }
}

PHP file:

if( is_valid_username($_POST['userid']) 
    && is_valid_password($_POST['pw']) 
    && is_valid_user($_POST['userid'], $_POST['pw']) ) {
    echo json_encode(true);
    return false;
}

Assuming is_valid_username($_POST['userid']) validates the username, is_valid_password($_POST['pw']) validates the password and is_valid_user($_POST['userid'], $_POST['pw']) checks for valid user.