如何在模板中包含jQuery验证

时间:2015-05-27 作者:crthompson

我正在尝试将jquery的validate方法加载到模板文件中。

我们的想法是能够运行这样的东西:

$jquery("#generateForm").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    },
    rules: {
                ...
        }
    },
     messages: {
                  ...
        }
    }
});     
根据几篇帖子,我把这个放在了标题中。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>
在这两种情况下,我得到的错误是:

未捕获引用错误:未定义jQuery

在jquery中。验证min.js文件。

这似乎是因为wordpress在加载jquery时使用了noConflict参数,但我似乎不知道如何绕过它。

如何加载此验证文件?

1 个回复
最合适的回答,由SO网友:sakibmoon 整理而成

对你说得对。这是因为jQuery的noConflict模式。

您需要使用jQuery 而不是$. 或者,您可以将所有内容包装在这样的函数中,以定义其范围

(function($){
    $("#generateForm").validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit();
        },
        rules: {
                ...
            }
        },
        messages: {
                ...
            }
        }
    });
})(jQuery);
根据几篇帖子,我把这个放在了标题中。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");
(有一个额外的括号,我已经去掉了)

结束

相关推荐

在WordPress中编写jQuery函数的正确方法

我正在使用基于AJAX的Wordpress模板(自定义),但在让jQuery正常运行时遇到了一些问题。我已经把所有的东西(按正确的顺序)排好了队,在某种程度上它确实起了作用,但我发现自己不得不写jQuery(\'... 与速记相反$(... 每次我想添加新的脚本片段时。我做错什么了吗?请参阅下面我的(精简)自定义JS文件;function customThemeFunctions(){ var windowHeight = jQuery(window).height();