jQuery Parsleyによる独自のバリデーション

Question

ｊQuery 1.12.4、 Parsley 2.4.3使用

jQueryプラグイン Parsleyを使い、バリデーションを実装しています。
http://parsleyjs.org/doc/

必須入力である、名前や件名が空の時にhas-errorというクラスが付加され、
入力済ならば、has-successというクラスが付加されるようにしています。

日時の欄は日、時、分の３つが入力されていなければ、エラーメッセージを
１つだけ表示するよう、独自のバリデーションを追加しようとしているのですが、
これが思うようにできていません。

<form class="parsley-validate" data-parslery-validate="" parsley-use-html5-constraints="false">
<label>お名前</label>
<input tyep="text" name="yourname" required="">

<label>メールアドレス</label>
<input tyep="email" name="email" required="">

<label>件名</label>
<input tyep="text" name="subject" required="">

<label>ご希望の日時</label>
<input type="date" name="request_date" required="required">

<select name="hour">
<option value=""></option>
<option value="00">00</option>
<option value="01">01</option>
略
</select>

<select name="minute">
<option value=""></option>
<option value="00">00</option>
<option value="01">01</option>
略
</select>

<textarea name="body" required=""></textarea>

<input type="submit" value="送信">
</form>

<script>
$(function(){
  $('form.parsley-validate').parsley({
    trigger: 'change',
    successClass: "has-success",
    errorClass: "has-error",
    classHandler: function (el) {
    	return el.$element.closest('.form-group'); //working
    },
    errorsWrapper: '<div class="invalid-message"></div>',
    errorTemplate: '<span></span>'
  });
});
</script>

この後、どのように書けばいいでしょうか。

追記します。
ここの回答を参考にしつつ、addValidatorを書いたのですが
動かずに困っています。（特にエラーもなし）
http://stackoverflow.com/questions/27383263/validate-multiple-fields-with-parsley

addValidatorを呼び出しているかどうかチェックするため
console.logを書いたのですが、何も出ていません。
ひたすらドキュメントを読んでいるのですが、解決できずにおります。

<!-- 参考URLを元に変更 -->
<input type="date" name="request_date" required="required" data-parsley-date="js-dob" class="js-dob-date">
<input type="text" name="hour" required="required" data-parsley-date="js-dob" class="js-dob-hour">
<input type="text" name="minute" required="required" data-parsley-date="js-dob" class="js-dob-minute">

<script>
$(function(){
  <!-- 以下を追記 -->
  window.Parsley.addValidator('date', 
    function(value, requirements){
      //addValidatorを呼び出してるかチェックするため
      console.log('addValidator');
      var day = $('.'+requirements+'-date').val(),
          hour = $('.'+requirements+'-hour').val(),
          day = $('.'+requirements+'-minute').val();
      //以下略
    }
  );
  <!-- /追記終わり -->

  $('form.parsley-validate').parsley({
    trigger: 'change',
    successClass: "has-success",
    errorClass: "has-error",
    classHandler: function (el) {
        return el.$element.closest('.form-group'); //working
    },
    errorsWrapper: '<div class="invalid-message"></div>',
    errorTemplate: '<span></span>'
  });
});
</script>

Answer 1

<label>ご希望の日時</label>
<input type="datetime-local" name="request_date" required="required">

datetime-localを使うとか？

Comments

[envogue]

コメントありがとうございます。
いい案なのですが、いつからだけ入力していつまでが未入力の場合にバリデートしたいので、今回は使え無さそうです。

Answer 2

【javascript - Validate multiple fields with Parsley? - Stack Overflow】
http://stackoverflow.com/questions/27383263/validate-multiple-fields-with-parsley

ここの質問と回答が流用できるのでは。

Comments

[envogue]

コメントありがとうございます。
StackOverflowの回答は見たことがありまして、追記部分のように書いてみたのですが、動かない状況でした。
辛抱強くドキュメントを読んでみようと思います。

[kei344]

input要素に data-parsley-trigger="change" を付けたら多分動くと思います。

他のコードが混じっている上moment.jsが入っていないので正しく動きませんが、addValidatorが動いたことを下記URLで確認しました。
http://jsfiddle.net/6fr1ccbf/5/

[envogue]

ありがとうございます。
参考にさせていただきます。
入力しないユーザーだとchangeイベントが発生しないので、
submitイベントでaddValidatorが動くよう試行錯誤してみます。

[kei344]

window.Parsley.on( 'field:validated', function() {
// Triggered after a field is validated (with success or with errors).
} );
でチェックすればいけるのでは？

[envogue]

ありがとうございます。
おかげさまで教えていただいた方法で関数を呼び出すことができました。
これで実装できます。
本当に助かりました。