Uncaught TypeError: Can not set property 'focusInvalid' of undefined

1

I am 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. On my site is the message "Uncaught TypeError: Can not set property 'focusInvalid' of undefined". I've moved everything and I can not understand what is happening.

Here's 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 () {" which gives the   error.

    
asked by anonymous 22.12.2017 / 15:54

1 answer

0

First, note that you started the plugin with lowercase letters, which would already cause an error and the plugin would not even start:

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

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

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

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

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

Anything other than this, Validator will not find form and will attempt to pull properties from an element not found, causing the Uncaught TypeError: Can not set property 'focusInvalid' of undefined , at:

this.settings.focusInvalid

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

    
22.12.2017 / 18:13