質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,436

score 18

前提・実現したいこと

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に挙動を追加するという認識でそもそも合っているのか、
合っているとして、クラス/要素の指定をどうしたらうまくいくのか教えていただけると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/05/08 11:25

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

    キャンセル

  • krat

    2017/05/08 12:06

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

    キャンセル

回答 2

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/09 12:17

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

    キャンセル

0

ほぼ解決しました。
セレクタの指定、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つ目以降でうまく動作しない原因がわかる方がいらっしゃいましたら教えていただけると幸いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る