在WordPress插件开发中使用javascript验证

Question

开始在WordPress中开发自定义数据库表插件。

当我开始在插件中使用jquery时，我已经开始收到如下错误的通知：

wp_enqueue_script被错误地称为。

我需要一些关于如何在jQuery插件中调用WordPress / js的帮助。

下面是我的验证代码：

<script>
    var jq = $.noConflict();
    jq(document).ready(function(){
        jq('#submit').click( function() {

            //check whether browser fully supports all File API
            if (window.File && window.FileReader && window.FileList && window.Blob)
            {

                //get the file size and file type from file input field
                var fsize = jq('#File_Upload')[0].files[0].size;

                if(fsize>5000000) //do something if file size more than 1 mb (1048576)
                {
                    //alert ("Only the file less than 5 mb  allowed to upload");
                    //alert ('<?php echo "Only the file less than 5 mb  allowed to upload";?>');
                    jq('.file-upload-error').show(0).delay(10000).hide(0);
                    return false;
                }
                else
                {
                    return true;
                }
            }
        });
    });
</script>

以上代码用于上载验证。

谢谢

Answer 1

首先，我稍微修改了javascript/jQuery代码：

jQuery(document).ready(function($){

    console.log("plugin script loaded");
    $('#submit').click( function() {

        //check whether browser fully supports all File API
        if (window.File && window.FileReader && window.FileList && window.Blob)
        {

            //get the file size and file type from file input field
            var fsize = $('#File_Upload')[0].files[0].size;

            if(fsize>5000000) //do something if file size more than 1 mb (1048576)
            {
                console.log("Only the file less than 5 mb  allowed to upload");
                $('.file-upload-error').show(0).delay(10000).hide(0);;
                return false;
            }
            else
            {
                console.log("file is less than 5 mb allowed to upload");
                return true;
            }
        }
    });
});

这是为插件排队javascript文件的正确方法：

add_action( 'wp_enqueue_scripts', 'custom_table_example_validation' );
function custom_table_example_validation() {
    wp_register_script( 'est_collaboration', plugins_url('/js/upload_valid.js', __FILE__), array('jquery'));
    wp_enqueue_script( 'jquery' );
}

这应该能行