0

Hi,

I'm new to JQuery and attempting to write a script to check username availability. My problem is that no matter what I type, I always get back "This username is already in use."

JQuery source:

$(document).ready(function() {

jQuery.validator.addMethod("usernameCheck", function(username) {
   var isSuccess = false;
   $.ajax({ url: "username_availability.php",
            data: "username=" + username,
            async: false,
            success:
                function(msg) { isSuccess = msg === "TRUE" ? true : false }
          });
    return isSuccess;
},"");

    $("#register_form").validate({
        onkeyup:false,
        rules: {
            username: {
                required: true,
                minlength: 3,
                usernameCheck: true    // remote check for duplicate username
            }
        },
        messages: {
            username: {
                required: "username is required.",
                minlength: jQuery.format("username must be at least {0} characters in length."),
                usernameCheck: "This username is already in use."
            }
        }
    });

PHP Source:

include('database_connection.php');                                  
if (isset($_POST['username'])) {                                                               
    $username = mysql_real_escape_string($_POST['username']);                                  
    $check_for_username = mysql_query("SELECT user_id FROM users WHERE username='$username'"); 
    if (mysql_num_rows($check_for_username)) {
        echo "TRUE";                                                                           
    } else {
        echo "FALSE";                                                                           //No Record Found - Username is available
    }
}
?>

HTML Source:

<input class="username" id="username" type="text" name="username" value="" maxlength="20" />&nbsp;

Thanks a lot

2
Contributors
12
Replies
18
Views
6 Years
Discussion Span
Last Post by AshtonHogan
Featured Replies
  • 1

    did you try the remote option? On the server, you should check for $_GET['username'] and return true OR false (lowercase) without any leading and/or trailing spaces. [CODE] $(document).ready(function() { $("#register_form").validate({ onkeyup:false, rules: { username: { required: true, minlength: 3, remote:"username_availability.php"// remote check for duplicate username } }, messages: { username: … Read More

  • 1

    look at the [iCODE]success[/iCODE] option. [url]http://docs.jquery.com/Plugins/Validation/validate#toptions[/url] You can see a full demo at [url]http://jquery.bassistance.de/validate/demo/milk/[/url] (look at the source code) jQuery.ajaxSetup( ) will allow you to setup async as default Read More

0

Same issue...

Do you know where I can find a working example using this type of JQuery validation for username?

1

did you try the remote option? On the server, you should check for $_GET and return true OR false (lowercase) without any leading and/or trailing spaces.

$(document).ready(function() {

    $("#register_form").validate({
        onkeyup:false,
        rules: {
            username: {
                required: true,
                minlength: 3,
				remote:"username_availability.php"// remote check for duplicate username
            }
        },
        messages: {
            username: {
                required: "username is required.",
                minlength: jQuery.format("username must be at least {0} characters in length."),
                remote: jQuery.format("{0} is already in use")
            }
        }
    });
});
<?php
include('database_connection.php');                                  
if (isset($_POST['username'])) {                                                               
    $username = mysql_real_escape_string($_POST['username']);                                  
    $check_for_username = mysql_query("SELECT user_id FROM users WHERE username='$username'"); 
    if (mysql_num_rows($check_for_username)) {
        echo "true";                                                                           
    } else {
        echo "false";//No Record Found - Username is available
    }
}
exit;
?>

Edited by hielo: n/a

0

Now it doesn't show any messages at all...

register.php

<html>
    <head>
        <title>

        </title>

        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery-ui.min.js"></script>
        <script type="text/javascript" src="jquery.validate.js"></script>
        <script type="text/javascript" src="custom_validation.js"></script>

    </head>
    <body>

        <form method="post" action="result.php" id="register_form" name="register_form">
            <fieldset>
                <legend>Register</legend>

                <label for="username">Username*</label>
                <input class="username" id="username" type="text" name="username" value="" maxlength="20" />&nbsp;
                <img id="loading" name="loading" src="loading.gif" alt="Loading..." style="display: none;"><br/><br/>

                <input type="submit" value="Submit"/>
            </fieldset>
        </form>

        <br/>

    </body>
</html>

username_availability.php

<?php
include('database_connection.php');
if (isset($_GET['username'])) {
    $username = mysql_real_escape_string($_GET['username']);
    $check_for_username = mysql_query("SELECT user_id FROM users WHERE username='$username'");
    if (mysql_num_rows($check_for_username)) {
        echo "true";
    } else {
        echo "false";//No Record Found - Username is available
    }
}
exit;
?>

custom_validation.js

$(document).ready(function() {

    $("#register_form").validate({
        onkeyup:false,
        rules: {
            username: {
                required:true,
                minlength:3,
                remote:"username_availability.php"    // remote check for duplicate username
            }
        },
        messages: {
            username: {
                required: "username is required.",
                minlength: jQuery.format("username must be at least {0} characters in length."),
                remote: jQuery.format("{0} is already in use")
            }
        }
    });
});
0

Open Firefox, install the Firebug plugin and then restart Firefox. Go to your page. On the lower-right corner of the browser you will see a "bug". Click it and you will see a sub-pane at the bottom of the Firefox. On that pane click on the "Net" menu, then on the "XHR" option/button. Fill your form and submit it. Once you do so, you will see the url that is submitting to and it will be prefixed with POST or GET, depending on the request type. You need to verify that it is in fact doing a GET request (may not be the case depending on your global jquery setting). Then click on the "+" icon to expand it. There should be a "params" tab that shows you what it is sending to the server and on another tab named "response" that shows what it is receiving FROM the server.

If you have a link to your page, it will help (I don't have all those js libraries you are using).

0

OK, I see you have a very outdated version of the validation plugin. Try updating it to the latest first and try again.

0

wow it's actually working :O

so... 2 small questions before I post the fixed version:

1. How do I put 2 messages, one for true and one for false? (Currently it only says when a username is not available).

2. How would I set ajax attributes like async, etc while using remote?

Thanks a lot though, it's been a while that I've been stuck with this...

0

Oh ya, and where would I put the loader?


Before I had it in my addMethod like:

$('#loading').hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.