ホール*オブ*アス

断続 断裂

存在する日付かどうかの判定をjQuery.validationEngineでやる方法

ってどうやんの? って訊かれ、まあまあ困ってる人も多そうなので記事。

jQuery.validationEngine てなんや

使ったこと無いけど使われてるのを見たことはある、程度の知識。 jQueryでフォームの入力値のバリデーションをリアルタイムで行うライブラリ。

ソースは↓ github.com

大体の使い方は↓ qiita.com

お答え

「form の input を readonly かつ validation では required にして、 カレンダーアイコンをタップで jQuery ui Datepicker (ja) から入力させるのが一番実装コスト低いんじゃない?」

移動中に訊かれたので、ちょいと調べ、上記でした。

jQuery ui Datepicker は ↓ www.webdesign-fan.com

多分もっと良いお答え

本家のREADME見てたら function でカスタムバリデート設定できるっぽ。 日付形式チェック用の正規表現を編集〜とかっていう手もあるんですけど、厳密に正しい日付かどうかはチェック不可能。 要するに 2019/02/29 みたいなのも正常な日付として受け入れてしまう。

なので以下のように関数呼び出してチェックする実装がよいであろうと。

フォーム。

<input value="" class="validate[required,funcCall[checkDate]]" type="text" name="date" id="date" placeholder="2019/01/01" />

scriptタグ内

// バリデーションエンジン起動
$(document).ready(function(){
    $("#form1").validationEngine();
});

// 日付バリデーション関数
function checkDate(field, rules, i, options){
  const inputted_dates = field.val().match(/(\d{4})\/(\d{2})\/(\d{2})/); // 日付のパース
  if(!inputted_dates || !isValidDate(inputted_dates[1], inputted_dates[2], inputted_dates[3])) {
    return `日付が不正です。`; // チェック結果をreturn
  }
}

// 日付の整合性チェック関数
function isValidDate(y,m,d) {
  dt=new Date(y,m-1,d);
  return(dt.getFullYear()==y && dt.getMonth()==m-1 && dt.getDate()==d);
}

これはセパレータがスラッシュの場合にしか対応してないですけど正規表現変えれば色々と対応可能。

一式ここに置いときます github.com