フォームのプレースホルダがうまく動かない

Question

###前提・実現したいこと
javascript、jQuery初心者です。

Material Design Liteを利用したサイトがあり、
そのフォームを修正しています。

生年月日の入力欄ではpickadate.jsを使用しているのですが、
入力の際、一度入力をキャンセルし空欄になったフォームのプレースホルダが
入力前の状態に戻ってくれません。

###現状のフォームの状態

▲現在の状態、プレースホルダに'is-dirty'クラスが適用された状態のままです。

▲フォーム空欄時、'is-dirty'クラスを削除しこの状態に戻って欲しい

###該当のソースコード

<div class="mdl-textfield mdl-js-textfield 
 string optional customer_born_on mdl-textfield--floating-label mdl-cell mdl-cell--12-col">
<label class="string optional mdl-textfield__label" for="customer_born_on">
生年月日
</label>
<input data-toggle="datepicker" class="string optional mdl-textfield__input"
 type="text" name="customer[born_on]" id="customer_born_on" />
</div>

  var input_pickdate = $('[data-toggle="datepicker"]');
  $.each(input_pickdate,function(i,e){
    $(e).pickadate({
      format: 'yyyy-mm-dd',
      formatSubmit: 'yyyy/mm/dd',
      hiddenName: true,
      onOpen: function(v) {
        var picker_date = $(e).pickadate('picker');
        $(picker_date.$root[0]).parent().addClass('is-dirty is-focus')
      },
      onSet: function(v){
        var picker_date = $(e).pickadate('picker');
        var is_dialog = $(picker_date.$root[0]).parents('.mdl-dialog__content').length > 0;
        if(v.select && is_dialog){
          $(picker_date.$root[0]).parent().find('label').hide();
        }else{
          $(picker_date.$root[0]).parent().find('label').show()
        }
      },

      // 下記が追記したもの
      onClose: function(v) {
        var picker_date = $(e).pickadate('picker');
          if ($(this).val().match(/\S/g)){
          $(picker_date.$root[0]).parent().removeClass('is-dirty is-focus')
          }
      }
    })

onCloseで、フォームの入力値が空欄の場合のみ'is-dirty'クラスを取り除けばいいのかと思ったのですが、
onCloseに挙動を追加するという認識でそもそも合っているのか、
合っているとして、クラス/要素の指定をどうしたらうまくいくのか教えていただけると幸いです。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS）を追記されたほうが回答を得やすいと思います。また、プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

[krat]

確認したらそもそもプラグインの名前も間違えていました･･･。ご指摘ありがとうございます。

Answer 1

解答欄に書かれている状況が手元で再現できませんが、たぶん下記のように $(e) を基準に要素を探す必要があるのでは？

var date_value = $(e).siblings('input:hidden').val();

Comments

[krat]

上記コードに修正して、うまく動作しました!
かなり大雑把な質問だったのに、ご回答頂きありがとうございました!
セレクタなどまだまだわからないことばかりなので、勉強します･･･!

Answer 2

ほぼ解決しました。
セレクタの指定、if文の条件を修正したら動くようになりました。

      onClose: function(v) {
        var picker_date = $(e).pickadate('picker');
        var date_value = $('.picker').siblings('input:hidden').val();
          if ( date_value =="" ){
          $(picker_date.$root[0]).parent().removeClass('is-dirty')
          }
      }

ただ、日付入力が複数あるページだと、2つ目以降の欄ではうまく動作しませんでした。
他により良い条件指定があるとか、2つ目以降でうまく動作しない原因がわかる方がいらっしゃいましたら教えていただけると幸いです。