How to save var value outside ajax success function?

I am trying to make some form validation functions. Here is what I have:

<script>
$(document).ready(function() {

var myObj = {}; 

$('#username').keyup(function () {

    id = $(this).attr('id');
    validateUsername(id);       

});

function validateUsername(id){

var username = $("#"+id).val();

    $.ajax({
        url : "validate.php",
        dataType: 'json',
        data: 'action=usr_id&id=' + username,
        type: "POST",
        success: function(data) {

            if (data.ok == true) {

                $(myObj).data("username","ok");

            } else {


                $(myObj).data("username","no");

            }

        }
    }); 


} // end validateusername function


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

    if (myObj.username == "ok")  {

        alert("Username OK");

    } else {

        alert("Username BAD");

    }   


});




}); // end doc ready

So you can see, when a key is pressed in the textbox, it checks if it's valid. The "data.ok" comes back correctly. The problem is based on the response, I define $(myObj).username. For some reason, I can't get this value to work outside the validateusername function. When clicking the submit button, it has no idea what the value of $(myObj).username is.

I need to use something like this, because with multiple form fields on the page to validate, I can do something like:

if (myObj.username && myObj.password && myObj.email == "ok")

... to check all my form fields before submitting the form.

I开发者_开发问答 know I must just be missing something basic.... any thoughts?

EDIT: SOLVED

All I had to do was change var myObj = {}; to myObj = {}; and it's working like a charm. I think I've been staring at this screen waaaaay too long!

You're not accessing the data that you stored properly. Access the username value this way:

$(myObj).data("username")

Resources:

Take a look at jQuery's .data() docs.

Very simple jsFiddle that shows how to properly set and retrieve data with jQuery's .data() method.

I would store the promise in that global variable and then bind an event to the done event within your submit button click.

$(document).ready(function() {

var myObj = false; 

$('#username').keyup(function () {

    id = $(this).attr('id');
    validateUsername(id);       

});

function validateUsername(id){

    var username = $("#"+id).val();

    myObj = $.ajax({
        url : "validate.php",
        dataType: 'json',
        data: 'action=usr_id&id=' + username,
        type: "POST",
        success: function(data) {
          $('#username').removeClass('valid invalid');
          if (data.ok == true) {
            $('#username').addClass('valid');
          }
          else {
            $('#username').addClass('invalid');
          }
        }
    }); 


} // end validateusername function


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

    // if myObj is still equal to false, the username has
    // not changed yet, therefore the ajax request hasn't
    // been made
    if (!myObj) {
        alert("Username BAD");
    }
    // since a deferred object exists, add a callback to done
    else {
        myObj.done(function(data){
            if (data.ok == true) {
                alert("Username BAD");
            }
            else {
                alert("Username OK");
            }               
        });
    }

});




}); // end doc ready

you may want to add some throttling to the keyup event though to prevent multiple ajax requests from being active at once.