• 解決済 mintchocolat

    (@mintchocolat)


    はじめまして。
    jQueryのdatepickerを使った必須入力項目が想定通りに動かず困っています。
    設定は以下です。
    [text* text-day id:res_calendar readonly placeholder “来店日 *”]

    症状としては、

    • フォームを順番通りに入力すると全く問題は起こらない
    • datepicker以降のtext*select*フォームを先に入力するとdatepickerフォームを選択してもエラー表示(.wpcf7-not-valid-tip 等)されたままになる⇒その状態でdatepicker以降の必須項目を一つでも入力し直すとエラーが消える
    • 全てのフォームを入力して、最後にdatepickerフォームの選択を行うとエラー表示のままだが、送信できる

    同じような経験をお持ちで、解決された方がいらっしゃいましたら是非お力をお貸しください!!
    ページリンクはdemo_mode: onになっています。

    よろしくお願いいたします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • まずこちらをご確認ください。質問を投稿する際の確認事項などが記されています。

    上記ページの「トラブルシューティングの基本」にあることは試されましたか?

    ⇨ デフォルトテーマを適用し、Contact Form 7 以外のプラグインを無効化した状態でも再現することを確認されましたか?

    • この返信は2ヶ月、 1週前にSetouchi Kotoriが編集しました。
    トピック投稿者 mintchocolat

    (@mintchocolat)

    ご返信ありがとうございます。
    投稿に不備があり、申し訳ございません。

    以下の環境でも同じ状況でした。

    ・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 "来店日 *"]
    トピック投稿者 mintchocolat

    (@mintchocolat)

    Setouchi様

    アドバイスありがとうございます。
    早速readonlyを削除したのですが、状況は変わっておりません。
    ただ選択した日付を一度削除し、手入力したらエラーが消えました。
    日付を選択した時点では、フォーム側が入力と認識していないようです。

    話はそれますが、readonlyを外したくない理由がありまして…
    予約受付が、今日から3日後~なのですが、前日の日付を勝手に入力する方がいらっしゃったので、その防止策でした。

    バリデーションのカスタマイズも含め、もう少し調べてみます。

    トピック投稿者 mintchocolat

    (@mintchocolat)

    その後、以下を試してみました。
    いずれも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

    トピック投稿者 mintchocolat

    (@mintchocolat)

    迅速なアドバイス、本当にありがとうございます。
    早速テストページで試したのですが、前と変わらぬ挙動でした。
    いただいたヒントを元に、もう少し模索してみます。

    チェック処理が実行されるのは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', {

    に変更したら動かないでしょうか?

    トピック投稿者 mintchocolat

    (@mintchocolat)

    @munyagu 様、 @wildworks 様 

    お二人のアドバイスのお陰で意図した動きになりました。
    こんなに早く解決できるとは!!
    本当にありがとうございました。

    こちらで解決済みとさせていただきます。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • このトピックに返信するにはログインが必要です。