JQuery Username Validation

Question

feoperro

13 Years Ago

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

javascript jquery php

2 Contributors
12 Replies
2K Views
23 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by feoperro

hielo 65 Veteran Poster

13 Years Ago

try:

...
success:
                function(msg) { isSuccess = !/TRUE/.test(msg); }
...

hielo 65 Veteran Poster

13 Years Ago

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 13 Years Ago by hielo because: n/a

hielo 65 Veteran Poster

13 Years Ago

look at the success option.
http://docs.jquery.com/Plugins/Validation/validate#toptions

You can see a full demo at http://jquery.bassistance.de/validate/demo/milk/ (look at the source code)

jQuery.ajaxSetup( ) will allow you to setup async as default

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

feoperro · Answer 1 · 2011-04-20T22:08:28+00:00

Same issue...

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

feoperro · Answer 2 · 2011-04-20T22:45:51+00:00

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")
            }
        }
    });
});

hielo 65 Veteran Poster · Answer 3 · 2011-04-20T23:09:47+00:00

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).

feoperro · Answer 4 · 2011-04-20T23:36:04+00:00

I tried it and got False for both, click here for the online one

feoperro · Answer 5 · 2011-04-20T23:58:06+00:00

the only user that's taken is "test"

hielo 65 Veteran Poster · Answer 6 · 2011-04-21T00:05:24+00:00

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

feoperro · Answer 7 · 2011-04-21T00:28:45+00:00

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...

feoperro · Answer 8 · 2011-04-21T00:33:25+00:00

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();
    });

feoperro · Answer 9 · 2011-04-21T01:18:27+00:00

Thanks a lot, you really went out of your way to help out!