JQueryでは、1つのフォーム入力の値に応じてエラーを表示する方法は？

Question

フォームを動的に作成しようとしていますが、2番目のフォームに4文字未満で入力すると、エラーメッセージとその色を表示します。

HREは私のコードです：

<form> 

    <label for="text">Text </label> 
    <input id="text" type="text"> 

    <label for="text2">Text 2</label> 
    <input id="text2" type="text"> 

    <button type="submit">Send</button> 

    <div class="alert alert-block alert-danger" style="display:none"> 

     <h4>Error!</h4> 

     You have to enter less than 4 caracters in the 2nde input ! 

    </div> 

    </form> 

<script src="bootstrap/js/jquery.js"></script> 
<script> 
    $(function(){ 
    $("form").on("submit", function() { 
     if($("input:text2").val().length < 4) { 
     $("div.form-group").addClass("has-error"); 
     $("div.alert").show("slow").delay(4000).hide("slow"); 
     return false; 
     } 
    }); 
    }); 
</script> 

しかし、場合にのみ、第一の入力の値がエラーメッセージが表示されます未満4つの文字ですが、私はときに表示したいようです第2入力は4文字未満です。

おかげ

Answer 1

の代わりに：あなたは

$("input:text2"); 

を意味した：

$("#text2") 

？私は前者が何を意味するかはわかりませんが、後者は2番目のテキスト入力IDのIDセレクタです。

Answer 2

jqueryの

if($("#text2").val().length < 4) 

$("form").on("submit", function() { 
 
     if($("#text2").val().length < 4) { 
 
     $("div.form-group").addClass("has-error"); 
 
     $("div.alert").show("slow").delay(4000).hide("slow"); 
 
     return false; 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 

 
    <label for="text">Text </label> 
 
    <input id="text" type="text"> 
 

 
    <label for="text2">Text 2</label> 
 
    <input id="text2" type="text"> 
 

 
    <button id="submitButton" type="submit">Send</button> 
 

 
    <div class="alert alert-block alert-danger" style="display:none"> 
 

 
     <h4>Error!</h4> 
 

 
     You have to enter less than 4 caracters in the 2nde input ! 
 

 
    </div> 
 

 
    </form>

のidセレクタを使用してみてください