web-dev-qa-db-ja.com

テンプレートにjquery validateを含める方法

テンプレートファイルにjqueryのvalidateメソッドをロードしようとしています。

アイデアはこのような何かを実行できるようにすることです。

$jquery("#generateForm").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    },
    rules: {
                ...
        }
    },
     messages: {
                  ...
        }
    }
});

いくつかの投稿に基づいて、私はこれを私のheader.phpファイルに入れました：

<?php

    function add_my_js_files(){
        wp_enqueue_script('jquery-validate-min', 
                          get_stylesheet_directory_uri() . '/js/jquery.validate.min.js', 
                          array( 'jquery' )  ) );
    }
    add_action('wp_enqueue_scripts', "add_my_js_files");

私はまた単にファイルをリンクしようとしました：

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js" 
        type="text/javascript">
</script>

両方 の場合、私が得るエラーは以下のとおりです。

不明なReferenceError：jQueryが定義されていません

Jquery.validate.min.jsファイル内。

これは、ワードプレスがjqueryのロード中に使用するnoConflictパラメーターが原因であるように思われますが、それを回避する方法を理解することはできません。

この検証ファイルを読み込む方法

jquerywp-enqueue-script
2
paqogomez

はい。あなたが正しい。これはjQueryのnoConflictモードが原因です。

$の代わりにjQueryを使う必要があります。あるいは、スコープを定義するために、すべてをこのような関数でラップすることもできます

(function($){
    $("#generateForm").validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit();
        },
        rules: {
                ...
            }
        },
        messages: {
                ...
            }
        }
    });
})(jQuery);

いくつかの投稿に基づいて、私はこれを私のheader.phpファイルに入れました：

header.phpにはありません。このコードをあなたのfunctions.phpファイルに入れてください。

function add_my_js_files(){
    wp_enqueue_script('jquery-validate-min', 
                      get_stylesheet_directory_uri() . '/js/jquery.validate.min.js', 
                      array( 'jquery' ) 
                     );
}
add_action('wp_enqueue_scripts', "add_my_js_files");

（余分な括弧がありました。私はそれを削除しました）

2
sakibmoon