JavaScript登録の検証エラーですか？

Question

私は登録の検証のために以下のJavaScriptを実行していますが、何かを入力するたびにusername_okが未定義で、他のすべての* _ok項目が返されます。この関数は定義された後に実行されるため、実際にユーザーに登録させることはできますが、定義することはできません。

誰かが私を助けてくれますか？私は同じ形式のコードを保持し、submit_check（）関数を働かせたいと思います。

$(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

これは、使用する変数がこれらのローカル関数のローカルスコープ内にあるためです。この問題を解決するには、あなたのdocument.ready関数の外に置く：次に

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*/ 

あなたの関数の内部で、ちょうどuser_ok=1;を使用して変更します。

また、submit_check関数のif文にエラーがあります。 &の代わりに& &を使用する必要があります。

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

これはうまくいきます。