###前提・実現したいこと
javascript、jQuery初心者です。
Material Design Liteを利用したサイトがあり、
そのフォームを修正しています。
生年月日の入力欄ではpickadate.jsを使用しているのですが、
入力の際、一度入力をキャンセルし空欄になったフォームのプレースホルダが
入力前の状態に戻ってくれません。
###現状のフォームの状態
▲現在の状態、プレースホルダに'is-dirty'
クラスが適用された状態のままです。
▲フォーム空欄時、'is-dirty'
クラスを削除しこの状態に戻って欲しい
###該当のソースコード
html
1<div class="mdl-textfield mdl-js-textfield 2 string optional customer_born_on mdl-textfield--floating-label mdl-cell mdl-cell--12-col"> 3<label class="string optional mdl-textfield__label" for="customer_born_on"> 4生年月日 5</label> 6<input data-toggle="datepicker" class="string optional mdl-textfield__input" 7 type="text" name="customer[born_on]" id="customer_born_on" /> 8</div>
js
1 var input_pickdate = $('[data-toggle="datepicker"]'); 2 $.each(input_pickdate,function(i,e){ 3 $(e).pickadate({ 4 format: 'yyyy-mm-dd', 5 formatSubmit: 'yyyy/mm/dd', 6 hiddenName: true, 7 onOpen: function(v) { 8 var picker_date = $(e).pickadate('picker'); 9 $(picker_date.$root[0]).parent().addClass('is-dirty is-focus') 10 }, 11 onSet: function(v){ 12 var picker_date = $(e).pickadate('picker'); 13 var is_dialog = $(picker_date.$root[0]).parents('.mdl-dialog__content').length > 0; 14 if(v.select && is_dialog){ 15 $(picker_date.$root[0]).parent().find('label').hide(); 16 }else{ 17 $(picker_date.$root[0]).parent().find('label').show() 18 } 19 }, 20 21 // 下記が追記したもの 22 onClose: function(v) { 23 var picker_date = $(e).pickadate('picker'); 24 if ($(this).val().match(/\S/g)){ 25 $(picker_date.$root[0]).parent().removeClass('is-dirty is-focus') 26 } 27 } 28 })
onCloseで、フォームの入力値が空欄の場合のみ'is-dirty'
クラスを取り除けばいいのかと思ったのですが、
onCloseに挙動を追加するという認識でそもそも合っているのか、
合っているとして、クラス/要素の指定をどうしたらうまくいくのか教えていただけると幸いです。
回答2件
あなたの回答
tips
プレビュー