ユーザー名の長さの確認jQuery

Question

ユーザーがクリックするたびに自動的に更新されるjQueryフォームを作成しようとしています。

現時点では、ユーザー名が正しい長さであるかどうかを問い合わせています。そうでなければ、入力ボックスを赤く輪郭を描くようにします。

これは私の現在のコードです（これはまったく機能していないようです）。

のjQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    jQuery(function($) { 
     $(document).click(function(e) { 
      if (!$(e.target).closest('#jq-user-getval').length) { 
       if ($('#jq-user-getval').val() != '') { 
        if($("#jq-user-getval").val() < 4) { 
         $("#jq-user-getval").addClass('border-force'); 
        } 
       } 
      } 
     }) 
    }) 
</script> 

あなたが見ることができるように、ユーザーが離れて入力ボックスからクリックしたときにボックスが空の場合、それはチェックするように、私はそれを作りました。空の場合は、長さが4文字未満かどうかをチェックし、赤いアウトラインを強制するクラスを追加することになっています。しかし、これは動作していません。

これはHTMLであるという問題がここかにある場合、私はわからないよ：

<form action="" method="post"> 
    <input id="jq-user-getval jq-user-class" type="text" name="username"> 
</form> 

あなたが任意の変更を提案することができます場合、私は、Microsoftの「Hotmailの」登録フォームを複製しようとしています。

Answer 1

idの値が正しくありません。技術的には、idにはスペースを入れることはできません。変更あなたの<input />へ：

<input id="jq-user-getval" class="jq-user-class" type="text" name="username" /> 

あなたが.val() < 4を使用している方法も間違っています。このため

"hello" < 4;   // This is meaningless. 
"hello".length < 4; // You should use this. 

使用.blur()機能を：あなたは、文字列でそのように比較することはできません

$(function() { 
    $(document).on("blur", "#jq-user-getval", function() { 
    if (this.value.trim().length !== 0 && this.value.trim().length < 4) 
     $(this).addClass("border-force"); 
    }); 
}); 

：

$(function() { 
    $("#jq-user-getval").blur(function() { 
    if (this.value.trim().length !== 0 && this.value.trim().length < 4) 
     $(this).addClass("border-force"); 
    }); 
}); 

あなたが動的に<input />をロードしている場合は、イベントをこのように委任することができます

余分なセキュリティのために、私は.trim()を追加しました。

.click()関数はどこにでも使用できます。クリックすると実際に<input />にあるblurイベントが発生します。

Answer 2

Jquery Validationを使用できます。

基本例：

<input id="username" name="username" maxlength="4" type="text" required> 

$("#yourFormID).validate(); 

入力が有効でないと、あなたは赤のアウトライン

をaddClass場合はerrorPlacementを使用する必要があり、検証中errorClassプロパティ（）関数