まずこちらをご確認ください。質問を投稿する際の確認事項などが記されています。
上記ページの「トラブルシューティングの基本」にあることは試されましたか?
⇨ デフォルトテーマを適用し、Contact Form 7 以外のプラグインを無効化した状態でも再現することを確認されましたか?
ご返信ありがとうございます。
投稿に不備があり、申し訳ございません。
以下の環境でも同じ状況でした。
・Contact form7以外のプラグイン無効化
・デフォルトテーマ(Twenty Twenty-Four)使用
・ブラウザキャッシュの削除
・ログイン、ログアウト状態
・上記の環境で複数ブラウザ
(Chrome、Edge、Firefox すべて最新)
サーバー環境
さくらインターネット
OS:FreeBSD 13.0-RELEASE-p13 amd64
ウェブサーバー:Apache/2.4.62
各バージョン
WordPress 6.6.1
PHP 8.2.20、PHP 8.3.8 (いずれもモジュールモード)
MySQL 5.7
先程リンク先をWP_DEBUGモードにしました(本番と同じ環境のテストサーバーなので、表示したままになっています)
特に関連のあるエラーはないようでした。
よろしくお願いいたします。
readonly
属性を削除しても再現するでしょうか。
readonly
属性を削除すると、ブラウザがユーザー入力を期待するようになり、datepicker
を使用した入力が正常に処理されるかもしれません。
[text* text-day id:res_calendar placeholder "来店日 *"]
Setouchi様
アドバイスありがとうございます。
早速readonly
を削除したのですが、状況は変わっておりません。
ただ選択した日付を一度削除し、手入力したらエラーが消えました。
日付を選択した時点では、フォーム側が入力と認識していないようです。
話はそれますが、readonly
を外したくない理由がありまして…
予約受付が、今日から3日後~なのですが、前日の日付を勝手に入力する方がいらっしゃったので、その防止策でした。
バリデーションのカスタマイズも含め、もう少し調べてみます。
その後、以下を試してみました。
いずれもdatepickerの日付フォームにエラー表示後は、入力してもメッセージが消えませんでした。
(後方の別の必須項目を入力・選択すると消えます)
【試したこと】
1.こちらを参考にさせていただき、送信ボタンを押したときにバリデーションが走るようにしました。
送信ボタンを押した後に日付フォームがエラーだった場合は、同じくメッセージが消えません。
2.バリデーションを別に設定
以下を子テーマのfunction.phpに入れましたが、上と同様でした。
add_filter('wpcf7_validate_text', 'custom_text_validation_filter', 20, 2);
function custom_text_validation_filter($result, $tag){
if ( empty($_POST['text-day'] ) && empty( $value ) ) {
$result->invalidate($tag, 'こちらは必須です');
}
return $result;
Contact Form 7 Date Time Pickerのプラグインデモサイトでも同じことが起こっていました。
https://wpapplab.com/contact-form-7-date-time-picker/
複数のクライアント様のサイトに利用しているのですが、他も同じ状態です。
最初の頃はこんな現象が起こらなかった気がします。
すごく気に入っているプラグインなので、できれば違うものに変更したくないです。
回避方法をご存じ方がいらっしゃいましたら、教えてください。
よろしくお願いいたします。
プラグイン・子テーマなし、デフォルトテーマのテストページを作りました。
(これまでのページは閉鎖しました)
https://tameru.jpn.org/test/
こんにちは
これは、HTMLのイベントの仕様によるものです。
この必須のチェックは、フィールドの値が変更されたとき(onChange)にチェックされています。
DatePicker は JavaScript で日付フィールドを書き換えていますが、JavaScript で値を書き換えた場合にはフィールドの値が変更されたとき、というイベントが実行されないという HTML の仕様があるため、必須のチェックが実行されず、「入力してください。」という文言が表示されたままになります。
日付フィールド以外の必須入力フィールドを変更した場合には入力チェックが実行されるため、日付フィールドもチェックされて表示が消えます。
私はやったことがないですが、以下のページなどを参考にされてはどうでしょうか。
https://support.createwebflow.jp/faq/view/2126.html
特定のプラグインで動作するかは分かりませんが、onSelect
を使って、日付が変更されたときに明示的にイベントをディスパッチ(送信)してみてはどうでしょうか。
例:
$( function() {
$( '#res_calendar' ).datepicker( {
onSelect: function() {
const inputEvent = new Event( 'input', {
bubbles: true
} );
document.getElementById( 'res_calendar' ).dispatchEvent( inputEvent );
}
} );
} );
こちらのコメントのコードを参考にしました。
また取り急ぎ、ネイティブinput要素では動作する事を確認しました。
https://codepen.io/Tetsuaki-Hamno/pen/MWMXbwm
迅速なアドバイス、本当にありがとうございます。
早速テストページで試したのですが、前と変わらぬ挙動でした。
いただいたヒントを元に、もう少し模索してみます。
チェック処理が実行されるのはonChange
と思います。
e.addEventListener("change", (t=>{
t.target.closest(".wpcf7-form-control") && wpcf7.validate(e, {
target: t.target
})
}
)),
ですので、@wildworks さんのコードの、
const inputEvent = new Event( 'input', {
を
const inputEvent = new Event( 'change', {
に変更したら動かないでしょうか?
@munyagu 様、 @wildworks 様
お二人のアドバイスのお陰で意図した動きになりました。
こんなに早く解決できるとは!!
本当にありがとうございました。
こちらで解決済みとさせていただきます。