入力フィールドの境界線の色を数値のみに設定するにはどうすればよいですか？

Question

入力フィールドの罫線の色を緑色に設定する必要がありますが、このフィールドの値が数字の場合のみです。これどうやってするの？ここに私のhtmlです：

<div class="well"> 
      <input type="text" class="field" value="1245"/><br/><br/> 
      <input type="text" class="field" value="efg#21"/><br/><br/> 
      <input type="text" class="field" value="34536"/><br/><br/> 
      <input type="text" class="field" value="abcd"/><br/><br/> 
      <input type="text" class="field" value="12asd"/><br/><br/> 
     </div> 
    </div> 

あなたはこれに対して有効なjs/jqueryコードを提案できますか？

Answer 1

あなたが値をチェックし、それに応じて境界線を設定する.css() -functionのコールバックを使用することができます。

$("input").css("border", function() { 
 
    return (!isNaN($(this).val())) ? '1px solid green' : ''; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="well"> 
 
    <input type="text" class="field" value="1245" /> 
 
    <input type="text" class="field" value="efg#21" /> 
 
    <input type="text" class="field" value="34536" /> 
 
    <input type="text" class="field" value="abcd" /> 
 
    <input type="text" class="field" value="12asd" /> 
 
</div>

---

リファレンス

isNaN

ternary operator

Answer 2

私は正規表現とjQueryを組み合わせます。これは、ユーザーからの入力にも応答します。

function validate() { 
 
    $("input").each(function() { 
 
    if ($(this).val().match("^[0-9]+$")) { 
 
     $(this).css("border-color","green") 
 
    } else { 
 
     $(this).css("border-color","red") 
 
    } 
 
    }); 
 
} 
 

 
$("input").on("keyup", validate); 
 
validate()

input { 
 
    border-width:1px; 
 
    border-style:solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="well"> 
 
    <input type="text" class="field" value="1245"/><br/><br/> 
 
    <input type="text" class="field" value="efg#21"/><br/><br/> 
 
    <input type="text" class="field" value="34536"/><br/><br/> 
 
    <input type="text" class="field" value="abcd"/><br/><br/> 
 
    <input type="text" class="field" value="12asd"/><br/><br/> 
 
</div>