JavaScript»ウェブ»jQuery応用編 バリデーション

ファイル名: js-web/quest_03189.html

下のソースコードを写してバリデーションを行うプログラムを作成してください。バリデーションとは、正しい値が入っているかチェックすることを言います。ソースコードを写し終わったら、数値や文字列を入力したり、空白にしてみたりして、フォーカスを外し、実行結果を確認してください。

実行画面


名前 :

年齢 :

ソースコード

<form>
  <div>
    名前 : <input type="text" name="name" class="required"><br>
    <span class="error_required"></span>
  </div>
  <div>
    年齢 : <input type="text" name="age" id="age" class="required"><br>
    <span class="error_required"></span>
    <span class="error_age"></span>
  </div>
</form>

<style type="text/css">
  div {
    margin-bottom: 10px;
  }
  span {
    font-size: 70%;
    color: red;
    font-weight: bold;
  }
</style>

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script type='text/javascript'>
$(function(){
  $(".required").blur(function() {
    if($(this).val() == "") {
      $(this).siblings('span.error_required').text("入力してください");
      $(this).addClass("errored");
    } else {
      $(this).siblings('span.error_required').text("");
      $(this).removeClass("errored");
    }
  });

  $(".submit").on('click', function() {
    $(".required").each(function() {
      if($(this).val() == "") {
        $(this).siblings('span.error_required').text("入力してください");
        $(this).addClass("errored");
      }
    });
    if($(".errored").length) {
      return false;
    }
  });

  $("#age").blur(function() {
    if(!$(this).val() == "" && !$(this).val().match(/^\d+$/)) {
      $(this).siblings('span.error_age').text("半角数字で入力してください");
      $(this).addClass("errored");
    } else {
      $(this).siblings('span.error_age').text("");
      $(this).removeClass("errored");
    }
  });
});
</script>

解説

match(/^\d+$/)で、フォームの値が半角数字のみか判断します。maech()の中の文字を変えることで、他の条件で調べることもできます。「jQuery match 正規表現」や「jQuery バリデーション」などで検索してみるとよいでしょう。