Question

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!

Answer 1

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.