rails 独学して軽くにちゃんまとめつくる

jQuery でフォーム回りを指定するとき

ここでは jQuery を使ってフロントエンドでもフォームのバリデーションをしてやろうとうときに落ちいたミスを書く。

 

jQuery でフォームを指定するとき、2通りの方法がある。1つめはフォームの文字を指定するとき、2つめはフォームそのものを選択するときである。

1つめは「入力された文字が10文字以上のときエラーを表示する」というようなときに使う。

  var name = $(':text[name="user[name]"]');

こんな風に書く。また、そのフォームに入力されている文字を取得するときは text ではなく val を使う。だから今回は

name.val

というような書き方になる。

 

2つめは「フォームが blur になったとき if 文を発火させる」というときに使う。このときの指定の仕方は至極簡単。

$("#user_name") とやるだけでいい。

 

 

これらを合わせてコードにしたのが以下のものである。

 
<div class="field">
<label for="user_name">Name</label>
<span id="user_name_error">error</span>
<br>
<input id="user_name" name="user[name]" type="text">
</div>

 

<script>

$(function(){
  var name = $(':text[name="user[name]"]');
  var name_error = $("#user_name_error");
  //name.val("あああ")
  $("input#user_name").on('blur', function(){
    
    if (name.val() == "") {
      name_error.text("名前を入力してください");
      name_error.css("color", "blue");
    }else{
      name_error.text("ok").css("color", "red");
    }
  });
});

</script>