Question

的StackOverflow！这是我的第一个问题，所以要温柔！ ;）

我从上到下搜索过SO但是找不到＆＃34; TypeError的解决方案：验证器未定义＆＃34;在我的下面的代码中。

我发现的唯一一件事就是这个Q＆amp; A：jQuery validation plugin error: TypeError: validator is undefined

似乎每个人都有类似的问题，表格ID无效。我查看了我的所有身份证，他们是对的。

关于我网站的一些细节：

我的代码存储在.js文件中，并在每个页面上加载。我将它加载到＆＃34; include＆＃34;中的每一页上。我所有自定义JavaScript代码都存在的文件（当然，这是EXCLUDES JQuery.js，bootstrap.js等）。我这样做是为了不必在数百个其他页面上复制/粘贴相同的代码，我只需添加一个＆＃34; include＆＃34;文件。

在 NOT 使用TinyMCE表单字段的页面上，我总是得到TypeError：验证器未定义＆＃34;我所有的其他JavaScript似乎都冻结了。在使用TinyMCE表单字段的页面上，它可以正常工作。

请注意，我的代码（如下所示）是其他人在此处回答的问题的结果。＆＃34; tinyMCE.triggerSave（）;＆＃34;例如，代码在尝试验证TinyMCE字段时一直在节省生命。

那么，有没有人看到下面的问题？我是否会被迫仅在使用TinyMCE的页面上加载代码？

    $(function() {
    var validator = $("#alert_notification_form").submit(function() {
                // Force MCE to update textarea before proceeding
                tinyMCE.triggerSave();
        }).validate({
            errorElement: 'span',
            errorClass: 'help-block help-block-error',
            focusInvalid: true,
            ignore: '',             
            rules: {
                impact: {
                    required: true
                },
                further_info: {
                    required: true
                }   
            },
            messages:{

                impact: {
                    required: 'Please state how we will be affected.'
                },
                further_info: {
                    required: 'Further Information is required.'
                }
            },
            errorPlacement: function (error, element) {
                if (element.parent(".input-group").size() > 0) {
                    error.insertAfter(element.parent(".input-group"));
                } else if (element.attr("data-error-container")) {
                    error.appendTo(element.attr("data-error-container"));
                } else if (element.parents('.radio-list').size() > 0) {
                    error.appendTo(element.parents('.radio-list').attr("data-error-container"));
                } else if (element.parents('.radio-inline').size() > 0) {
                    error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
                } else if (element.parents('.checkbox-list').size() > 0) {
                    error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
                } else if (element.parents('.checkbox-inline').size() > 0) {
                    error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element) {
                $(element)
                    .closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element)
                    .closest('.form-group').removeClass('has-error');
            },
            success: function (label) {
                label
                    .closest('.form-group').removeClass('has-error');
            }
    });
    validator.focusInvalid = function() {
            // put focus on tinymce on submit validation
            if (this.settings.focusInvalid) {
                try {
                    var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
                    if (toFocus.is("textarea")) {
                        tinyMCE.get(toFocus.attr("id")).focus();
                    } else {
                        toFocus.filter(":visible").focus();
                    }
                } catch (e) {
                    // ignore IE throwing errors when focusing hidden elements
                }
            }
        }
    $(".reset").click(function() {
        validator.resetForm();
    });
});

更新 - 2015年1月3日

我在下面尝试了两个建议，但我可能会遗漏其他内容。我找到了＆＃34; validator.focusinvalid＆＃34;我的代码中的函数来自GIT存储库：https://github.com/jzaefferer/jquery-validation/blob/master/demo/tinymce4/index.html

验证器功能是否存在问题？我尝试删除＆＃34; tinyMCE.triggerSave（）;＆＃34;完全仍然得到TypeError：验证器未定义。

我错过了什么？：（

作为参考，我添加了初始化TinyMCE的代码。

tinymce.init({
selector: "textarea",
menubar: false,
plugins: "link, paste, lists, wordcount",
toolbar: "undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link | paste",
setup: function(editor) {
    editor.on('change', function(e) {
        tinymce.triggerSave();
        $("#" + editor.id).valid();
    });
} });

Answer 1

您可以在所有页面上加载此脚本，但您需要一种方法来检测TinyMCE是否处于活动状态。您可以通过调用以下函数来执行此操作，如果为true，则执行tinyMCE.triggerSave();

function isTinyMCEActive()
{
    is_tinyMCE_active = false;
    if (typeof(tinyMCE) != "undefined")
    {
        if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false)
        {
            is_tinyMCE_active = true;
        }
    }

    return is_tinyMCE_active;
}

这用于检测TinyMCE是否有效。

现在，对于“TypeError：validator is undefined”错误，问题可能是由于您将对submit（）和validate（）的调用链接起来的方式引起的。这是代码的更新版本，调用beforeSubmit（）方法将编辑器的值保存到textareas。这样，您就可以定位表单，然后在提交时调用validate（）方法（在更新textareas之后）。

$(function() {
var validator = $("#alert_notification_form").validate({
       beforeSubmit:function() {
            // Force MCE to update textarea before proceeding
            tinyMCE.triggerSave();
            return true;
       },
        errorElement: 'span',
        errorClass: 'help-block help-block-error',
        focusInvalid: true,
        ignore: '',             
        rules: {
            impact: {
                required: true
            },
            further_info: {
                required: true
            }   
        },
        messages:{

            impact: {
                required: 'Please state how we will be affected.'
            },
            further_info: {
                required: 'Further Information is required.'
            }
        },
        errorPlacement: function (error, element) {
            if (element.parent(".input-group").size() > 0) {
                error.insertAfter(element.parent(".input-group"));
            } else if (element.attr("data-error-container")) {
                error.appendTo(element.attr("data-error-container"));
            } else if (element.parents('.radio-list').size() > 0) {
                error.appendTo(element.parents('.radio-list').attr("data-error-container"));
            } else if (element.parents('.radio-inline').size() > 0) {
                error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
            } else if (element.parents('.checkbox-list').size() > 0) {
                error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
            } else if (element.parents('.checkbox-inline').size() > 0) {
                error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function (element) {
            $(element)
                .closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element)
                .closest('.form-group').removeClass('has-error');
        },
        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error');
        }
});
validator.focusInvalid = function() {
        // put focus on tinymce on submit validation
        if (this.settings.focusInvalid) {
            try {
                var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
                if (toFocus.is("textarea")) {
                    tinyMCE.get(toFocus.attr("id")).focus();
                } else {
                    toFocus.filter(":visible").focus();
                }
            } catch (e) {
                // ignore IE throwing errors when focusing hidden elements
            }
        }
    }
$(".reset").click(function() {
    validator.resetForm();
});
});

Answer 2

一种简单的方法是在初始化代码之前检查元素或元素类是否存在，该代码仅适用于该类型的元素，但如果运行代码则可能导致问题。

$(function(){
    if($('.someSpecialClass').length){
       /* code that applies only when selector exists */    
    }
});

或者，如果你有一个插件的各种选项，取决于是否存在类

var pluginOpts={
   foo:'some value'
}

if($('.someSpecialClass').length){
      $.extend(pluginOpts , {bar: 'another value'});   
}

$(selector).somePlugin(pluginOpts);

JQuery + TinyMCE = TypeError：验证程序未定义

2 个答案: