/    Sign up×
Community /Pin to ProfileBookmark

First, I’m a total newbie at JS. I’m using this pratically self-made script to check if email and display name exist on database, using AJAX and jQuery. Each of the text inputs have a button to manually check, else it checks onBlur with the accordingly function.

The username one works fine but the email only works if I manually click to check. I’ve been trying to fix it but no luck at all.

[CODE]<script type=”text/javascript”>
$(document).ready(function() {

//the min chars for username
var display_min_chars = 3;
var display_max_chars = 20;

var email_min_chars = 5;
var email_max_chars = 120;

//result texts
var characters_display_error = ‘Length of display name: 3-20 chars.’;
var checking_display_html = ‘Checking…’;

var characters_email_error = ‘Length of email: 5-120 chars.’;
var checking_email_html = ‘Checking…’;

$(‘#check_email_availability’).click(function(){

if($(‘#email’).val().length < email_min_chars || $(‘#email’).val().length > email_max_chars){

$(‘#email_availability_result’).html(characters_email_error);
document.registerForm.submit_reg.disabled = true;
}else{

$(‘#email_availability_result’).html(checking_email_html);
check_email_availability();
}
});

$(‘#check_username_availability’).click(function(){

if($(‘#username’).val().length < display_min_chars || $(‘#username’).val().length > display_max_chars){

$(‘#username_availability_result’).html(characters_display_error);
document.registerForm.submit_reg.disabled = true;
}else{

$(‘#username_availability_result’).html(checking_display_html);
check_display_availability();
}
});

});

//function to check username availability
function check_display_availability(){
var min_chars = 3;
var max_chars = 20;

//result texts
var characters_error = ‘Length of display name: 3-20 chars.’;
var checking_html = ‘Checking…’;

if($(‘#username’).val().length < min_chars || $(‘#username’).val().length > max_chars){

$(‘#username_availability_result’).html(characters_error);
document.registerForm.submit_reg.disabled = true;
return;
}else{
//else show the cheking_text and run the function to check
$(‘#username_availability_result’).html(checking_html);

//get the username
var username = $(‘#username’).val();

//use ajax to run the check
$.post(“http://www.tf2warehouse.com/user/check_username”, { username: username },
function(result){
if(result == “available”){
$(‘#username_availability_result’).html(‘Display name available!’);
document.registerForm.submit_reg.disabled = false;
}else{
if(result == “invalid”){
$(‘#username_availability_result’).html(‘Display name is invalid.’);
document.registerForm.submit_reg.disabled = true;
}
if(result == “notavailable”){
$(‘#username_availability_result’).html(‘Display name is not available.’);
document.registerForm.submit_reg.disabled = true;
}
if(result == “empty”){
$(‘#username_availability_result’).html(‘Display name is empty.’);
document.registerForm.submit_reg.disabled = true;
}
}
});
}
}

function check_email_availability(){
$(‘#email_availability_result’).html(checking_email_html);
var email_min_chars = 5;
var email_max_chars = 120;

//result texts
var email_characters_error = ‘Length of email: 5-120 chars.’;
var email_checking_html = ‘Checking…’;

if($(‘#email’).val().length < email_min_chars || $(‘#email’).val().length > email_max_chars){

$(‘#email_availability_result’).html(email_characters_error);
document.registerForm.submit_reg.disabled = true;
return;
}else{
//else show the cheking_text and run the function to check
$(‘#email_availability_result’).html(email_checking_html);

//get the username
var email = $(‘#email’).val();

//use ajax to run the check
$.post(“http://www.tf2warehouse.com/user/check_email”, { email: email },
function(result2){
if(result2 == 0){
$(‘#email_availability_result’).html(‘Email available!’);
document.registerForm.submit_reg.disabled = false;
}else{
if(result2 == “invalid”){
$(‘#email_availability_result’).html(‘Email is invalid.’);
document.registerForm.submit_reg.disabled = true;
}
if(result2 == 1){
$(‘#email_availability_result’).html(‘Email is already in use!’);
document.registerForm.submit_reg.disabled = true;
}
if(result2 == “empty”){
$(‘#email_availability_result’).html(‘Email is empty.’);
document.registerForm.submit_reg.disabled = true;
}
}
});
}
}

</script> [/CODE]

to post a comment
JavaScript

15 Comments(s)

Copy linkTweet thisAlerts:
@QueopsauthorFeb 17.2010 — On
[CODE]function check_email_availability(){
$('#email_availability_result').html(checking_email_html);
[/CODE]

Please ignore the second line, I was trying to debug
Copy linkTweet thisAlerts:
@QueopsauthorFeb 17.2010 — Okay I got firebug installed and it says when onBlur:

check_email_availability is not a function

Why is this?
Copy linkTweet thisAlerts:
@QueopsauthorFeb 17.2010 — I can't repeat functions or what? :S

[SIZE="5"]Guys I still haven't solved this.[/SIZE]
Copy linkTweet thisAlerts:
@iandevlinFeb 17.2010 — Two things:

  • 1. Don't shout

  • 2. "I can't repeat functions or what?" - what on earth do you mean by that?
  • Copy linkTweet thisAlerts:
    @QueopsauthorFeb 17.2010 — Two things:

  • 1. Don't shout

  • 2. "I can't repeat functions or what?" - what on earth do you mean by that?
  • [/QUOTE]


    Did you post just to say that? Where do you see me shouting at all?

    I emphasized, not shouted, so everyone can notice this wasn't solved yet because of the replies I made (mainly because I can't edit main post, at least I don't see the link to).

    As for the function, it seems onBlur event is only recognizing one, since it only works on one. What you think I mean by that?

    Thanks for being rude to a newbie.
    Copy linkTweet thisAlerts:
    @iandevlinFeb 17.2010 — Well you've posted here expecting someone to come along and help, which is fine. But because they haven't emphasising something the way you have is the same as shouting online, and therefore comes across as rude.

    As for the function, it seems onBlur event is only recognizing one, since it only works on one. What you think I mean by that?[/quote]

    This still doesn't make any sense.

    Have you got a version online that we can look at and test? Or at least post your HTML code.
    Copy linkTweet thisAlerts:
    @QueopsauthorFeb 17.2010 — Well, the code is none other than what you would expect:
    [code=html]<input type="text" name="userEmail" value="" id="email" onBlur="check_email_availability()" />
    <input type="text" name="userDisplayName" value="" id="username" onBlur="check_display_availability()" />
    [/code]

    For the text fields and...
    [code=html] <input type='button' id='check_username_availability' value='Check Display Availability' />

    <div id='username_availability_result'></div>
    <input type='button' id='check_email_availability' value='Check Email Availability' />

    <div id='email_availability_result'></div>

    </div>
    [/code]

    For the respective checking buttons and DIV's that contain the checking messages.

    There's absolutely nothing else related to this javascript code other than the checking webpage, that outputs the expected values on javascript (and it works also! just not onBlur event)

    Thanks for helping.
    Copy linkTweet thisAlerts:
    @iandevlinFeb 17.2010 — Try changing it to:

    [code=html]<input type="text" name="userEmail" value="" id="email" onBlur="check_email_availability();return false;" />[/code]
    Copy linkTweet thisAlerts:
    @QueopsauthorFeb 17.2010 — Still doesn't work and Firebug reports this (username check is still working fine):
    [CODE]
    check_email_availability is not a function
    function onblur(event) { check_email_availability(); return false; }(Object { name="event"})
    [Break on this error] check_email_availability();[/CODE]
    Copy linkTweet thisAlerts:
    @iandevlinFeb 17.2010 — It all works fine for me after changing:

    [code=html]document.registerForm.submit_reg.disabled = ....[/code]

    to

    [code=html]document.getElementById("registerForm").submit_reg.disabled = ...[/code]
    Copy linkTweet thisAlerts:
    @QueopsauthorFeb 17.2010 — It all works fine for me after changing:

    [code=html]document.registerForm.submit_reg.disabled = ....[/code]

    to

    [code=html]document.getElementById("registerForm").submit_reg.disabled = ...[/code][/QUOTE]


    I changed all those that had registerForm to getElementById("registerForm") and username checker still works, and email one still doesn't work, giving the same error on Firebug. I'm using jQuery from google, before my script tags:
    [CODE]<script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1");
    </script>[/CODE]


    Is this a problem?
    Copy linkTweet thisAlerts:
    @iandevlinFeb 17.2010 — Odd, it all works fine for me, although I used:

    [code=html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>[/code]

    to include jQuery.
    Copy linkTweet thisAlerts:
    @QueopsauthorFeb 17.2010 — Odd, it all works fine for me, although I used:

    [code=html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>[/code]

    to include jQuery.[/QUOTE]


    Yeh, switching to that didn't make a difference :S

    Upon further inspecting firebug I find that if I click on: function onblur(event) { check_email_availability(); return false; }[B](Object { name="event"})[/B]
    [/QUOTE]

    The object part, it opens me a window that says window -> object and then a table list with name -> "event" and value -> "undefined"

    Does this mean anything?
    Copy linkTweet thisAlerts:
    @iandevlinFeb 17.2010 — Not to me.

    Here's the code that I created from yours that "works":

    [code=html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    //the min chars for username
    var display_min_chars = 3;
    var display_max_chars = 20;

    var email_min_chars = 5;
    var email_max_chars = 120;

    //result texts
    var characters_display_error = 'Length of display name: 3-20 chars.';
    var checking_display_html = 'Checking...';

    var characters_email_error = 'Length of email: 5-120 chars.';
    var checking_email_html = 'Checking...';

    $('#check_email_availability').click(function(){

    if($('#email').val().length < email_min_chars || $('#email').val().length > email_max_chars){

    $('#email_availability_result').html(characters_email_error);
    document.getElementById("registerForm").submit_reg.disabled = true;
    }else{

    $('#email_availability_result').html(checking_email_html);
    check_email_availability();
    }
    });

    $('#check_username_availability').click(function(){

    if($('#username').val().length < display_min_chars || $('#username').val().length > display_max_chars){

    $('#username_availability_result').html(characters_display_error);
    document.getElementById("registerForm").submit_reg.disabled = true;
    }else{

    $('#username_availability_result').html(checking_display_html);
    check_display_availability();
    }
    });
    });

    //function to check username availability
    function check_display_availability(){
    var min_chars = 3;
    var max_chars = 20;

    //result texts
    var characters_error = 'Length of display name: 3-20 chars.';
    var checking_html = 'Checking...';

    if($('#username').val().length < min_chars || $('#username').val().length > max_chars){
    $('#username_availability_result').html(characters_error);
    document.getElementById("registerForm").submit_reg.disabled = true;
    alert("check_display_availability");
    return;
    } else{
    //else show the cheking_text and run the function to check
    $('#username_availability_result').html(checking_html);

    //get the username
    var username = $('#username').val();

    //use ajax to run the check
    $.post("http://www.tf2warehouse.com/user/check_username", { username: username },
    function(result){
    if(result == "available"){
    $('#username_availability_result').html('Display name available!');
    document.getElementById("registerForm").submit_reg.disabled = false;
    }else{
    if(result == "invalid"){
    $('#username_availability_result').html('Display name is invalid.');
    document.getElementById("registerForm").submit_reg.disabled = true;
    }
    if(result == "notavailable"){
    $('#username_availability_result').html('Display name is not available.');
    document.getElementById("registerForm").submit_reg.disabled = true;
    }
    if(result == "empty"){
    $('#username_availability_result').html('Display name is empty.');
    document.getElementById("registerForm").submit_reg.disabled = true;
    }
    }
    });
    }
    }

    function check_email_availability() {
    //$('#email_availability_result').html(checking_email_html);
    var email_min_chars = 5;
    var email_max_chars = 120;

    //result texts
    var email_characters_error = 'Length of email: 5-120 chars.';
    var email_checking_html = 'Checking...';

    if($('#email').val().length < email_min_chars || $('#email').val().length > email_max_chars) {
    $('#email_availability_result').html(email_characters_error);
    document.getElementById("registerForm").submit_reg.disabled = true;
    alert("check_email_availability");
    return;
    }
    else{
    //else show the cheking_text and run the function to check
    $('#email_availability_result').html(email_checking_html);

    //get the username
    var email = $('#email').val();

    //use ajax to run the check
    $.post("http://www.tf2warehouse.com/user/check_email", { email: email },
    function(result2){
    if(result2 == 0){
    $('#email_availability_result').html('Email available!');
    document.getElementById("registerForm").submit_reg.disabled = false;
    }else{
    if(result2 == "invalid"){
    $('#email_availability_result').html('Email is invalid.');
    document.getElementById("registerForm").submit_reg.disabled = true;
    }
    if(result2 == 1){
    $('#email_availability_result').html('Email is already in use!');
    document.getElementById("registerForm").submit_reg.disabled = true;
    }
    if(result2 == "empty"){
    $('#email_availability_result').html('Email is empty.');
    document.getElementById("registerForm").submit_reg.disabled = true;
    }
    }
    });
    }
    }

    </script>

    </head>
    <body>

    <form id="registerForm">
    <input type="text" name="userEmail" value="" id="email" onBlur="check_email_availability();return false;" />
    <input type="text" name="userDisplayName" value="" id="username" onBlur="check_display_availability();return false;" />
    <input id = "submit_reg" type="submit" value="click me" />
    </form>

    </body>
    </html>
    [/code]
    Copy linkTweet thisAlerts:
    @QueopsauthorFeb 17.2010 — Funny, even with your code it's not working, maybe something is interfering?

    Bah, I just quit...
    ×

    Success!

    Help @Queops spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.21,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...