私は、次のコードを実装しよう

Question

を働いていないチェックinput.length：

<div class="clear"id="usernameline">username:<input type="text" name="username" id="username" style="border:1px solid #928b8b;"> (at least 3 character)</div> 
<div id="usercheck"></div> 
<input style="cursor:pointer;border:1px solid #ffffff;background:#c0c0c0;color:#484848" type="button" class="form_button" id="register" value="register!"> 

<script> 
    var error1 = '<span style="color:#ff0000">please fill in your username</span>'; 
    var error2 = '<span style="color:#ff0000">please insert at least 3 character</span>'; 
    $("#register").click(function() { 
     if ($("#username").val() == '') { 
      $("#usercheck").show(); 
      $("#usercheck").html(error1); 
     } else if ($("#username").val() != '') { 
      var user = $("#username").val(); 
      if (user.length <= 3) { 

       $("#usercheck").html(error2); 

      } else { 

       $("#usercheck").hide(); 
      } 
     } 
    });  
</script> 

私はボタンを登録する]をクリックすると、入力ボックス内の値の長さが3よりも大きい場合には、$("#usercheck").hide()は誰でも、することができますと呼ばれていません私のコードで何が間違っているか教えてください。どんな助けでも大歓迎です。

Answer 1

あなたが追加することによって、再び表示する必要があり：

$("#usercheck").show(); 

if (user.length <= 3) {した後、それ以外の場合は、隠されたままになります。

EDIT：ロジックがより明確になるよう

私は、コードの一部をきれいにする時間がかかった：

<script> 
    var error = $("#usercheck"); 
    var username = $("#username"); 
    var error1 = '<span style="color:#ff0000">please fill in your username</span>'; 
    var error2 = '<span style="color:#ff0000">please insert at least 3 character</span>'; 
    $("#register").click(function() { 
     if (username.val() == '') { 
      error.show(); 
      error.html(error1); 
     } else if (username.val().length <= 3) { 
      error.show(); 
      error.html(error2); 
     } else { 
      error.hide(); 
     } 
    }); 
</script>