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

R9102 发表于 Dev

R9102

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

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

wp_enqueue_script被错误地调用。

我需要一些有关如何在WordPress插件中调用jQuery / 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>

上面的代码用于上传验证。

谢谢

LoicTheAztec

首先，我对您的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' );
}

这应该工作

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。