Uncaught Typeerror: Cannot set Property 'focusInvalid' of Undefined

Question

I’m making a validate to be used in conjunction with tinymce. On the Jquery Validate website, there is an example to do this. There it works. My website is displaying the message "Uncaught Typeerror: Cannot set Property 'focusInvalid' of Undefined". I’ve touched everything and I can’t understand what happens.

Follow what I’ve done so far.

   tinymce.init({
    selector: "textarea",
    fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt",
    theme: "modern",
    height: 200,
    resize: false,
    language: "pt_BR",
    removed_menuitems: 'newdocument',
    forced_root_block : "", 
    force_br_newlines : true,
    force_p_newlines : false,           
    plugins: [
    "advlist autolink lists link image charmap preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen",
    "insertdatetime media nonbreaking save table contextmenu directionality",
    "template paste textcolor colorpicker textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | fontsizeselect  | bold italic | alignleft aligncenter alignright alignjustify",
    toolbar2: "bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons",
    templates: [
    {title: 'Test template 1', content: 'Test 1'},
    {title: 'Test template 2', content: 'Test 2'}
    ]
    }); 
    $(function() {
    var validator = $("#myform").submit(function() {
                // update underlying textarea before submit validation
    tinyMCE.triggerSave();
    }).validate({
    ignore: "",
                rules: {
                    title: "required",
                    content: "required"
    },
    errorPlacement: function(label, element) {
                    // position error label after generated textarea
                    if (element.is("textarea")) {
                        label.insertAfter(element.next());
                    } else {
                        label.insertAfter(element)
                    }
                }
            });
    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
                    }
                }
            }
        })

It is in this line "Validator.focusInvalid = Function() {" that gives the error.

Answer 1

First, note that you started the plugin in lower case, which would cause an error and the plugin wouldn’t even start:

tinymce.init({ instead of tinyMCE.init({

But the error quoted is related to id of form you want to validate, in the line below:

var validator = $("#myform").submit(function() {

That means that the form must have the same id instantiated by the Validator:

<form id="myform" action="">

Anything other than that, Validator won’t find the form and will attempt to pull properties from an element not found, causing the error Uncaught Typeerror: Cannot set Property 'focusInvalid' of Undefined, in:

this.settings.focusInvalid

The this is each element that will be validated in the form. Therefore, if the element does not exist, it will result in the cited error.