サポート » 使い方全般 » MW WP FormにてJSのバリデーションを追加する

  • MW WP FormにてjQuery-Validation-Engineを適用させ、
    非同期でもバリデーションを行えるようにしたいと考えています。

    MW WP Formではinputなどに直接classを追加することは出来ないようなので、
    それぞれclass付きのspanで囲み、
    JSでspanからinputにclassを移し替える方法でjQuery-Validation-Engineの動作は出来ました。

    しかし、入力エラーの状態でsubmitボタンを2回以上クリックすると
    MW WP FormのJSと競合しているようで、
    submitにdisableが付いてしまい送信することが出来なくなてしまいました。

    MW WP Form側のJSを変えるのはアップデートなど考えるとしない方がいいと思い
    つまずいている状況です。

    なにか良い方法があればご教授お願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター Okamoto Hidetaka

    (@hideokamoto)

    まずはどこで競合しているかを確認されるのが一番かなと思います。
    Chromeやfirefoxならばブラウザ上でJSのデバッグができますので。

    Chrome デベロッパーツールでのJavaScriptデバッグ方法

    var mw_wp_form_button_no_click = true;
        $('.mw_wp_form input[type="submit"]').click(function() {
            var formElement = $(this).closest('form')[0];
            if (formElement && formElement.checkValidity && !formElement.checkValidity()) {
                return;
            }
            if (mw_wp_form_button_no_click) {
                mw_wp_form_button_no_click = false;
            } else {
                $(this).prop('disabled', true);
            }
        });

    この部分の記述で
    2回目以降のクリックを行なう際にsubmitにdisableがついてしまいます。
    恐らく2重送信を防ぐためかなと思うのですが・・。

    wp_dequeue_scriptを使用して、
    JS自体を吐き出さないようにしようかとも思ったのですが、
    https://github.com/inc2734/mw-wp-form/blob/master/js/form.js
    このJSを使わないことによる不具合を恐れています。。。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「MW WP FormにてJSのバリデーションを追加する」には新たに返信することはできません。