読者です 読者をやめる 読者になる 読者になる

【JavaScript】【jquery】jquery.validate.jsの基本的な使い方

JavaScript jquery

 フォームへの入力チェック(バリデーション)を行ってくれる、jQueryプラグインの【jquery.validate.js】を利用したのでまとめておきます。

今回フォームはこんな感じです。
f:id:yu-ya4:20150702162648p:plain
date_select.html

<html>
<head>
<title>validate</title>
<meta charset="utf-8">
</head>
<body>
  <h2>validate</h2>
  <form class="form-signin">
    <table class="usertable">
        <tr>
            <th>名前</th>
            <td><input name="myname" type="text" value="" /></td>
        </tr>
        <tr>
            <th>電話番号</th>
            <td><input name="num" type="text" value="" /></td>
        </tr>
        <tr>
            <th>メアド</th>
            <td><input name="address"type="text" value="" /></td>
        </tr>
        <tr>
            <th>性別</th>
            <td>
                <input name="gender" type="radio" value="男性" /> 男姓  
                <input name="gender" type="radio" value="女性" /> 女姓
            </td>
        </tr>
    </table>
    <button id="button" class="btn btn-large btn-primary" type="submit">登録</button>
  </form>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/val.js"></script>
</body>
</html>


jquery.validate.jsはこちらのリンクからダウンロードしてください。
jQuery Validation Plugin | Form validation with jQuery

ダウンロードしたzipファイルを解凍したら、jquery.validate.min.jsを自分のjsファイルにつっこんで準備完了です。(jquery.jsも一緒に設定してください)

jquery.validate.jsでは、inputのname属性ごとにエラーメッセージ、エラーチェックのルールを定義できます。また、デフォで用意されているルール以外にも自分で独自のバリデートルールを定義することも可能です。

とりあえずJavaScriptのコードはこんな感じになりました。

val.js

(function(){
  //標準エラーメッセージの変更
  $.extend($.validator.messages, {
    email: '*正しいメールアドレスの形式で入力して下さい',
    required: '*入力必須です',

    phone: "*正しい電話番号の形式で入力してください"
  });

 //追加ルールの定義
  var methods = {
    phone: function(value, element){
      return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value);
    }
  };

  //メソッドの追加
  $.each(methods, function(key) {
    $.validator.addMethod(key, this);
  });

  //入力項目の検証ルール定義
  var rules = {
    myname: {required: true},
    num: "phone",
    address: {required: true, email: true},
    gender:  {required: true}
  };

  //入力項目ごとのエラーメッセージ定義
  var messages = {
    myname: {
      required: "*名前を入力してください"
    },
    address: {
      required: "*メアドを入力してください"
    },
    gender: {
      required: "*性別を選択してください"
    }
  };

  $(function(){
    $('#testform').validate({
      rules: rules,
      messages: messages,

      //エラーメッセージ出力箇所調整
      errorPlacement: function(error, element){
        if (element.is(':radio')) {
          error.appendTo(element.parent());
        }else {
          error.insertAfter(element);
        }
      }
    });
  });

})();


1ブロックずつ解説していきますね。



まず1ブロック目では、標準で定義されているエラーメッセージを変更してあげています。もちろん変更なしでもvalidate自体は問題なく機能します。

 //標準エラーメッセージの変更
  $.extend($.validator.messages, {
    email: '*正しいメールアドレスの形式で入力して下さい',
    required: '*入力必須です',

    phone: "*正しい電話番号の形式で入力してください"
  });

バリデートルール : "表示させたいエラーメッセージ"
って感じで好きにつけてあげてください。


続いて2ブロック目では追加ルールを定義しています。

var methods = {
    phone: function(value, element){
      return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value);
    }
  };

今回は'phone'というルールを新たに定義してあげました。正規表現で表してやればよいみたいです。この'phone'は11桁の数字または000-0000-000のように3桁-4桁-3桁とハイフンで数字が繋げられているものならエラーを出さないというルールです。

そして3ブロック目のaddMethod()で定義した追加ルールを登録しています。

4ブロック目と5ブロック目ではそれぞれ、適応する検証ルールとエラーメッセージをinputのname属性ごとに設定しています。

//入力項目の検証ルール定義
  var rules = {
    myname: {required: true},
    num: "phone",
    address: {required: true, email: true},
    gender:  {required: true}
  };

  //入力項目ごとのエラーメッセージ定義
  var messages = {
    myname: {
      required: "*名前を入力してください"
    },
    address: {
      required: "*メアドを入力してください"
    },
    gender: {
      required: "*性別を選択してください"
    }[f:id:matsumura-kobetsu:20150611175118p:plain]
  };

ルール定義では基本的に、name : {rule: true} という感じでokです。
たとえば myname: {required: true} は、name="myname"であるinputに対してrequired(入力必須)ルールの適用を行う、という具合です。
"phone"というのは先ほど定義した検証ルールですね。
エラーメッセージ定義では、name : {rule: "エラーメッセージ"} という感じです。


これで設定が終わりましたので、最後にフォームに対して(idで指定しています)先ほど設定してあげたrulesとmessagesを適用してバリデートを実行しています。

$(function(){
    $('#testform').validate({
      rules: rules,
      messages: messages
    });
  });

実際にバリデイトを行うとこんな感じで怒ってくれます。すみません。

f:id:yu-ya4:20150702162644p:plain

何が素晴らしいって、入力するたびにエラーチェックを行ってくれるのと、submitしようとした際もエラーチェックを行ってくれるところですね。便利。

ちなみにerrorPlacementってのは、エラーメッセージを表示する箇所を設定してあげてます。

以上で簡単なjquery.validate.jsの使い方は終了です。
もうちょい書きたいことがあったりなかったりするのでまた続編を書くかもしれません。書かないかもしれません。

この記事がどなたかのお役に立てれば幸せです。

【JavaScript】【jquery】セレクトボックスでのうるう年計算

JavaScript jquery

簡単な入力フォームを作ってJavaScriptの勉強をしているのですが、
生年月日を入力する際にいい感じでうるう年も考慮してくれるものがなかったので
いろいろなサイトやらを参考にしながら作りました。

フォームはこんな感じです。
f:id:yu-ya4:20150702162652p:plain
date_select.html

<html>
<head>
<title>日付選択</title>
<meta charset="utf-8">
</head>
<body>
<form class="form">
    <select id="year">
        <option value="">--西暦--</option>
    </select>
    <select id="month">
        <option value="">-月-</option>
    </select>
    <select id="day">
        <option value="">-日-</option>
    </select>
</form>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/date_select.js"></script>
</body>
</html>

javascriptはこんな感じです。
date_select.js

(function(){
  //日付範囲決定
  function calcDays(){
    $('#day').empty();
    var y = $('#year').val();
    var m = $('#month'). val();

    if (m == "" || y == "") { //年か月が選択されていない時は31日まで表示
      var last = 31;
    } else if (m == 2 && ((y % 400 == 0) || ((y % 4 == 0) && (y % 100 != 0)))) {
      var last = 29; //うるう年判定
    } else {
      var last = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)[m-1];
    }

    $('#day').append('<option value="">日</option>');
    for (var i = 1; i <= last; i++) {
      if (d == i) { //日がすでに選択されている場合はその値が選択された状態で表示
        $('#day').append('<option value="' + i + '" selected>' + i + '</option>');
      } else {
        $('#day').append('<option value="' + i + '">' + i + '</option>');
      }
    }
  }

  var d = 0;
  $(function(){
    //1900年~2015年まで表示
    for (var i = 2015; i >= 1900; i--) {
      $('#year').append('<option value="' + i + '">' + i + '</option>');
    }
    //1月~12月まで表示
    for (var i = 1; i <= 12; i++) {
      $('#month').append('<option value="' + i + '">' + i + '</option>');
    }
    //1日~31日まで表示
    for (var i = 1; i <= 31; i++) {
      $('#day').append('<option value="' + i + '">' + i + '</option>');
    }

    $('#day').change(function(){
      d = $(this).val();
    });
    //年か月が変わるごとに日数を計算
    $('#year').change(calcDays);
    $('#month').change(calcDays);
  });
})();

まあ、単純にうるう年の計算方法をそのまま実装しただけですね。

  1. 西暦年が4で割り切れる
  2. ただし、西暦年が100では割り切れてはいけない
  3. ただし、西暦年が400で割り切れるのはok

西暦年か月が選びなおされる都度日付を計算するようにしています。
また、日付がすでに選択されていた場合はその値を保持しておき、
年や月を選び直して再度日付計算が行われても日付を選びなおさないでいいように実装しています。

こんな簡単なことなのにとても時間がかかってしまいました・・・。
jquery使ったのも初めてですので多めに見てやってください。

次回はvalidateについて書こうかな...

記事中へのソースコードの埋め込み

さて、ブログを始めてみたわけですがどうやって記事中にソースコードを埋め込むのかなーって思って調べてみたのでまとめてみました。

と言っても簡単で、ソースコードを'>||'と'||<'という記号で挟めばいいだけのようでした。

ただ、一つ注意点ですが、これははてな記法というらしく、

f:id:yu-ya4:20150702160715p:plain

こんな風に設定の編集モードをはてな記法モードに変更してやる必要があります。

例えば、記号で挟まなかったら

#include

int main(void){

printf("hello, world!");

return 0;

}

という風に表されるところ、'>||'と'||<'で挟んでやれば...

#include <stdio.h>

int main(void){

    printf("hello, world!"); 

    return 0;

}

こんな風に、入力コードをいい感じに表してくれます。枠で囲んでくれるのいいですね。

また、記号で挟む際に、'>|lang_type|' '||<' のlang_typeにプログラミング言語の種類を入れてやると、
(この例では lang_type = c)

#include <stdio.h>

int main(void){

    printf("hello, world!"); 

    return 0;

}

こんな風に色分けして表示してくれるようです。

他にもいろんな言語に対応しているようで、詳しくは以下のリンクから対応しているファイルタイプをご確認下さい。

ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ

とりあえずこんな感じでかっこよくコードを貼付ける方法は分かりましたので、これからは貼付けるだけのコードを書けるように精進して参ります。

他にもはてな記法には便利なものがたくさんあるようですので少しずつ使えるようになればいいなと思います。

以上、初投稿でした。