Question

I have the following JavaScript running for my registration validation but everytime I enter something it returns the username_ok as undefined, and every other *_ok item. The function is meant to run after it has been defined so I can actually allow the user to register but it fails to define it.

Could somebody help me please? I would like to keep the same format of code and just get the submit_check() function working.

$(document).ready(function() {
    var min_chars = 4;
    var characters_error = 'Minimum amount of chars is 4';
    var checking_html = 'Checking...';
    $('#username').keyup(function(){
        if($('#username').val().length < min_chars){
            $('.username_error').html(characters_error);
            $('.username_error').css('color', 'red');
            $('#username').css('color', 'red');
            $('#username').css('border', '1px solid red');
        }else{
            $('.username_error').html(checking_html);
            $('.username_error').css('color', '#DDDDDD');
            $('#username').css('color', '#DDDDDD');
            $('#username').css('border', '1px solid #DDDDDD');
            check_availability();
        }
    });
});
function check_availability(){
    var username = $('#username').val();
    $.post("./includes/check-user.php", { username: username },
    function(result){
        if(result == 1){
            $('.username_error').html('The username ' + username + ' is Available');
            $('.username_error').css('color', 'green');
            $('#username').css('color', 'green');
            $('#username').css('border', '1px solid green');
            var user_ok='1';
            submit_check();
        }else{
            $('.username_error').html('The username ' + username + ' is not Available');
            $('.username_error').css('color', 'red');
            $('#username').css('color', 'red');
            $('#username').css('border', '1px solid red');
        }
    });
}

$(document).ready(function() {
    var min_chars_name = 4;
    var characters_error_name = 'Please enter atleast 4 chars.';
    $('#fname').keyup(function(){
        if($('#fname').val().length < min_chars_name){
            $('.fname_error').html(characters_error_name);
            $('.fname_error').css('color', 'red');
            $('#fname').css('color', 'red');
            $('#fname').css('border', '1px solid red');
        }else{
            $('.fname_error').css('color', 'green');
            $('#fname').css('color', 'green');
            $('#fname').css('border', '1px solid green');
            $('.fname_error').html('');
            var fname_ok='1';
            submit_check();
        }
    });
});

$(document).ready(function() {
    var min_chars_name = 4;
    var characters_error_name = 'Please enter atleast 4 chars.';
    $('#lname').keyup(function(){
        if($('#lname').val().length < min_chars_name){
            $('.lname_error').html(characters_error_name);
            $('.lname_error').css('color', 'red');
            $('#lname').css('color', 'red');
            $('#lname').css('border', '1px solid red');
        }else{
            $('.lname_error').css('color', 'green');
            $('#lname').css('color', 'green');
            $('#lname').css('border', '1px solid green');
            $('.lname_error').html('');
            var lname_ok='1';
            submit_check();
        }
    });
});

$(document).ready(function() {
    $('#birthd').change(function(){
        if($('#birthd').val() == '0'){
            $('#birthd').css('color', 'red');
            $('#birthd').css('border', '1px solid red');
        }else{
            $('#birthd').css('color', 'green');
            $('#birthd').css('border', '1px solid green');
            var birthd_ok='1';
            submit_check();
        }
    });
});

$(document).ready(function() {
    $('#birthm').change(function(){
        if($('#birthm').val() == '0'){
            $('#birthm').css('color', 'red');
            $('#birthm').css('border', '1px solid red');
        }else{
            $('#birthm').css('color', 'green');
            $('#birthm').css('border', '1px solid green');
            if($('#birthd').val() == '0'){
                $('#birthd').css('color', 'red');
                $('#birthd').css('border', '1px solid red');
            }else{
                $('#birthd').css('color', 'green');
                $('#birthd').css('border', '1px solid green');
                var birthm_ok='1';
                submit_check();
            }
        }
    });
});

$(document).ready(function() {
    $('#birthy').change(function(){
        if($('#birthy').val() == '0'){
            $('#birthy').css('color', 'red');
            $('#birthy').css('border', '1px solid red');
        }else{
            $('#birthy').css('color', 'green');
            $('#birthy').css('border', '1px solid green');
            var birthy_ok='1';
            submit_check();
            if($('#birthd').val() == '0'){
                $('#birthd').css('color', 'red');
                $('#birthd').css('border', '1px solid red');
            }else{
                $('#birthd').css('color', 'green');
                $('#birthd').css('border', '1px solid green');
                var birthm_ok='1';
            submit_check();
            }
        }
    });
}); 

$(document).ready(function() {
    $('#gender').blur(function(){
        if($('#gender').val() == '-'){
            $('#gender').css('color', 'red');
            $('#gender').css('border', '1px solid red');
        }else{
            $('#gender').css('color', 'green');
            $('#gender').css('border', '1px solid green');
            var gender_ok='1';
            submit_check();
        }
    });
    $('#gender').change(function(){
        if($('#gender').val() == '-'){
            $('#gender').css('color', 'red');
            $('#gender').css('border', '1px solid red');
        }else{
            $('#gender').css('color', 'green');
            $('#gender').css('border', '1px solid green');
            var gender_ok='1';
            submit_check();
        }
    });
});

$(document).ready(function() {
    var min_chars_name = 4;
    var characters_error_name = 'Please enter atleast 4 chars.';
    var match_error_name = 'Your passwords do not match.';
    $('#pass').keyup(function(){
        if($('#pass').val().length < min_chars_name){
            $('.pass_error').html(characters_error_name);
            $('.pass_error').css('color', 'red');
            $('#pass').css('color', 'red');
            $('#pass').css('border', '1px solid red');
        }else{
            $('.pass_error').css('color', 'green');
            $('#pass').css('color', 'green');
            $('#pass').css('border', '1px solid green');
            $('.lname_error').html('');
            $('#pass').keyup(function(){
                if($('#pass2').val() !== $('#pass').val()){
                    $('.pass_error').html(match_error_name);
                    $('.pass_error').css('color', 'red');
                    $('#pass2').css('color', 'red');
                    $('#pass2').css('border', '1px solid red');
                }else{
                    $('.pass_error').css('color', 'green');
                    $('#pass2').css('color', 'green');
                    $('#pass2').css('border', '1px solid green');
                    $('.pass_error').html('');
                    var gender_ok='1';
                    submit_check();
                }
            });
            $('#pass2').keyup(function(){
                if($('#pass2').val() !== $('#pass').val()){
                    $('.pass_error').html(match_error_name);
                    $('.pass_error').css('color', 'red');
                    $('#pass2').css('color', 'red');
                    $('#pass2').css('border', '1px solid red');
                }else{
                    $('.pass_error').css('color', 'green');
                    $('#pass2').css('color', 'green');
                    $('#pass2').css('border', '1px solid green');
                    $('.pass_error').html('');
                    var gender_ok='1';
                    submit_check();
                }
            });
        }
    });
});

function submit_check(){
    if(user_ok=='1' & gender_ok=='1' & birthm_ok=='1' & birthd_ok=='1' & birthy_ok=='1' & fname_ok=='1' & lname_ok=='1'){
        document.write("hello");
    };
};

Answer 1

This is because those variables you use are inside local scope of those local functions. To fix this, put them outside of your document.ready function:

var user_ok = 0;
var gender_ok = 0;
var birthm_ok = 0;
var birthd_ok = 0;
var birthy_ok = 0;
var fname_ok = 0;
var lname_ok = 0;
/*Now do your $(document).ready things*/

Then inside of your functions, change them by just using user_ok=1;.

Also, there is an error in your if statement for the submit_check function. You need to use && instead of &.

function submit_check(){
    if(user_ok=='1' && gender_ok=='1' && birthm_ok=='1' && birthd_ok=='1' && birthy_ok=='1' && fname_ok=='1' && lname_ok=='1'){
        document.write("hello");
    };
};

Hope this works for you.