J-Query | alert()が反応しない

Question

以下のような入力チェックで判定が行われません。
動作としては、入力した値の文字列の長さがない場合にエラーになる動きです。
alert()が反応しないのですが、何か間違えていますか？

 <input type="text" name="name" class="form-control" id="name">

$('#name').change(function(){
		str_temp = $(this).val();
		if(str_temp.length===0){
			alert("arror");	
		}
});

Answer 1

一気に解決を目指すのではなくドコに問題があるのか1つ1つ探っていくのが良いと思います。

1. kobayash様が言われているようにjQueryが読み込まれてから該当するコードが実行されていますか？

2. そもそもchangeイベントは動作していますか？

$(function(){
  $('#name').change(function(){
    var str_temp = $(this).val(); // 余計なお世話かもしれませんが var 付けたほうが良いかと。
    console.log(str_temp, str_temp.length); // ココこconsoleを追加
    if(str_temp.length===0){
      alert("arror");
    }
  });
});

inputタグにフォーカスさせ何か入力。inputタグ以外の所をクリックしてフォーカスを外す。
その際にconsole.logが書き出されているか見てみてください。
console.logが書き出されていない場合はchangeイベントが期待通りに動作させられていないので、この部分以外のjavascriptあるいはhtmlに原因がある可能性が高いかと思います。

1. 実装したい挙動がchangeでは実現できない方法の可能性はありませんか？

tempakyousuke様 が書かれている通りchangeイベントはフォームの値が変更された時に動作します。
ですので下記のような手順であればchangeイベントの挙動通りalertが表示されます。

1. 一度何か値をいれてinput からフォーカスを外す。
   (changeイベントが発生: lengthのある値なのでalertにはならない。 )
2. 再度inputをクリックしてフォーカスさせ入力されている値を全て消してフォーカスを外す。
   (changeイベントが発生: length === 0 の値に変更されたのでalertが表示される)

ではなく、

1. 空のinputタグにフォーカス。何か値を入れる。
2. フォーカスを外さず そのまま 値を消す。
3. inputタグからフォーカスを外す。 <- ココでalertを表示させたい

のような想定なのだとすると、inputタグの値は変更されていませんのでchangeイベントは発生しませんのでこの方法ではalertは表示されないかと思います。

入力中ではなく、フォーカスが外れた後に値をチェックでということでしたら
focusoutを使うのが良いのではないかと思います。

$(function() {
  $('#name').on('focusout', function(e) {
    var val = $(this).val();
    if(!val.length) {
      alert("error");
    }
  });
});

入力中にチェックしたいと言うことでしたらnoise様が言われている通りkeyupを使うのが良いかと思います。ただキー入力の度に処理を入れていると若干ウザかったり重くなったりしますのでタイマーを合わせて使うと少しはマシになるかと思います。

$(function() {
  var timer = false;
  $('#name').on('keyup', function(e) {
    clearTimeout(timer);
    var $t = $(this);
    timer = setTimeout(function() {
      var val = $t.val();
      if(!val.length) {
        alert("error");
      }
    }, 300);
  });
});

Answer 2

tempakyousukeさんのコードのように、script部分をinputのあとに記述しておりますでしょうか？
そうでなければ、下記のようにする必要があります。

$(function(){
    $('#name').change(function(){
        str_temp = $(this).val();
        if(str_temp.length===0){
            alert("arror");    
        }
    });
});

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <input type="text" name="name" class="form-control" id="name"> <script type="text/javascript"> $('#name').change(function(){ str_temp = $(this).val(); if(str_temp.length===0){ alert("arror"); } }); </script>

私の環境ではこれだけで動作しました。
正しく動作していないならどこかで文法ミスしているのではないでしょうか。

それかchangeの挙動を勘違いされているかもしれません。
changeはフォームにフォーカスがつく前とフォーカスがはずれた後を比べます。
なので何か文字をうった後にフォーカスをはずさずに文字を全て消してもアラートされません。

Comments

[noise]

関数が動くタイミングとして、キー入力ごとに関数実行をご希望でしょうか。
tempakyousuke様のおっしゃるように、changeなので、フォーカスアウトやエンターキーをトリガーに関数が呼び出されているはずです。

onであれば、イベントを紐付けできますので、いろいろなタイミングで関数が呼び出せます。

$('#name').on('keyup',function(){//changeからonに変えてトリガーイベントを指定（この場合keyupを仮指定。半角スペースを区切りに複数のイベントを設定可能）
str_temp = $(this).val();
if(str_temp.length===0){
alert("arror");
}
});

指定するイベントによっては、呼び出されるタイミングでalertが少しうるさくなるかもしれません。
解決のヒントになれば幸いです。
横から失礼いたしました。