Редактор Trumboqyg WYSIWYG не работает с Jquery.Validate plugin, «Uncaught TypeError: Не удается прочитать свойство« nodeName »неопределенного»

Question

Я вытаскиваю свои волосы, пытаясь понять это.

Я запускаю jquery 2.2.2 на данный момент с плагином проверки jquery. https://jqueryvalidation.org/ И редактор Trumbowyg WYSIWYG. https://alex-d.github.io/Trumbowyg/

Замечательно, что в основном все работает, каждый раз, когда пользователь нажимает или делает что-либо на самом деле. Вы получаете консольную ошибку Uncaught TypeError: Cannot read property 'nodeName' of undefined. Он также создает определенные части Trumbowyg для неправильной работы.

Так что я решил использовать класс ignore в плагине проверки jquery. Но это не работает. Я попытался игнорировать почти все маркировки классов для разных полей, и независимо от того, что я делаю, это никогда не игнорируется.

Как я могу использовать плагин проверки jquery с текстовым редактором trumbowyg?

Вот мой код проверки.

$('form').validate({ 
    errorPlacement: function (error, element) { 
     if ($(element).parent('.input-group').length) { 
      error.insertAfter(element.parent().siblings('label')); 
      error.addClass('alert alert-danger validate'); 
     } else { 
      error.insertAfter(element.siblings('label')); 
      error.addClass('alert alert-danger validate'); 
     } 
    }, 
    errorElement: 'div', 
    highlight: function (element) { 
     $(element).parent().addClass("has-error"); 
    }, 
    unhighlight: function (element) { 
     $(element).parent().removeClass("has-error"); 
    }, 
    ignore: '.advanced', 
    rules: { 
     password_confirm: { 
      equalTo: 'input[name=password]' 
     }, 
     user_username: { 
      remote: { 
       url: 'action/check/', 
       type: 'POST', 
       data: { 
        id: function() { 
         return $('input[name=id]').val(); 
        } 
       } 
      } 
     }, 
     nav_name: { 
      remote: { 
       url: 'action/check/', 
       type: 'POST', 
       data: { 
        id: function() { 
         return $('input[name=id]').val(); 
        } 
       } 
      } 
     } 
    }, 
    messages: { 
     password_confirm: { 
      equalTo: "Passwords must match" 
     }, 
     user_username: { 
      remote: "This Username already exists" 
     }, 
     nav_name: { 
      remote: "This Nav Item Name already exists" 
     } 
    }, 
    submitHandler: function (form) { 
     $('button[type="submit"]').addClass('disabled').prop('disabled', true).prepend('<span class="bootstrap-dialog-button-icon glyphicon glyphicon-asterisk icon-spin"></span>'); 
     form.submit(); 
    } 
}); 

Я удалил плагин проверки и все с trumbowyg действительно работало. Так что, может быть, пришло время найти новый плагин проверки, я действительно хотел бы избежать этого.

Обновление: Я заметил, что firefox дает мне другую ошибку, поэтому я решил, что поделюсь этим.

TypeError: owner is undefined 
owner[ this.expando ] && owner[ this.expando ][ key ]; 

Пример проблема должна быть доступны для демонстрации здесь: http://develop.chrischampeau.com/admin/test.php

Answer 1

Это известная проблема с jQuery Validation плагиным, где содержание редактируемые элементы в формах будут вызывать исключения, когда событие происходит.

Вы можете найти this issue описания те же проблемы:

• Разрывы ваш WYSIWYG.
• Неопределенные ошибки.
• Все кнопки панели инструментов в вашем WYSIWYG принимают два клика для запуска.

Модификация/хак предлагается в этой теме, чтобы решить проблему, но pull request фиксируя этот же вопрос уже объединены в проект в мае.

Проблема в том, что последняя версия выпущена с февраля, поэтому это слияние недоступно на данный момент. В соответствии с этим other issue, сопровождающий заявил 15 часов назад, что релиз идет очень скоро, и он включает в себя the fix для вашей проблемы.

Если вы не можете дождаться новой версии, вы всегда можете получить последнюю версию из своего репозитория или вишни, выберите себе исправление, включенное в этот pull request.

Что касается второго вопроса, которую вы описали в комментариях после применения исправления из запроса тянущего, jQuery Validation проверку на различных мероприятиях (onfocusout особенно в данном случае), если элемент должен быть проигнорирован или не проверяя, если он имеет класс, указанный в настройках.

Вы хотите добавить в свой текстовой class="advanced" игнорировать его, к сожалению, когда Trumbowyg инициализируется, оболочка будет создан следующим:

<div class="trumbowyg-editor trumbowyg-reset-css" contenteditable="true" dir="ltr" placeholder=""> 

Он не распространяет advanced класса обертки. Потенциальное исправление заключается в том, чтобы добавить себя в этот класс, когда инициализируется Trumbowyg. Для этого вы можете положиться на событие tbwinit, изменив свой конструктор.

// Setup WYSIWYG 
$('textarea.advanced').trumbowyg({ 
    resetCss: true, 
    removeformatPasted: true, 
    autogrow: true, 
    btnsDef: { 
    // Customizables dropdowns 
     image: { 
      dropdown: ['insertImage', 'upload', 'base64', 'noEmbed'], 
      ico: 'insertImage' 
     } 
    }, 
    btns: [ 
     ['viewHTML'], 
     ['undo', 'redo'], 
     ['formatting'], 
     'btnGrp-design', 
     ['link'], 
     ['image'], 
     'btnGrp-justify', 
     'btnGrp-lists', 
     ['foreColor', 'backColor'], 
     ['preformatted'], 
     ['horizontalRule'], 
     ['fullscreen'] 
    ], 
    plugins: { 
     // Add imagur parameters to upload plugin 
     upload: { 
      serverPath: 'https://api.imgur.com/3/image', 
      fileFieldName: 'image', 
      headers: { 
       'Authorization': 'Client-ID 9e57cb1c4791cea' 
      }, 
      urlPropertyName: 'data.link' 
     } 
    } 
}).on('tbwinit', function(){ 
    $('.trumbowyg-editor').addClass('advanced'); 
}); 

После инициализации, Ваша обертка будет иметь advanced класс, так что jQuery Validation может использовать его.

<div class="trumbowyg-editor trumbowyg-reset-css advanced" contenteditable="true" dir="ltr" placeholder=""> 

Что касается второго вопроса, это вызвано, потому что некоторые библиотеки Trumbowyg при открытии всплывающего окна (как те ваши упомянутых в вашем комментарии: Вставить ссылку, Вставка изображения и т.д.), они фактически добавляя <form> в DOM, но внутри другого <form>, который приводит к вложенным формам.

В случае вложенных форм вторая ошибка, о которой вы указали, запускается при помощи проверки jQuery. Вы можете проверить комментарий владельца jQuery Validation плагина по этой проблеме на this message:

Nesting forms is invalid HTML. Either the [...] plugin doesn't generate a form if there is already one, or it has to append it outside the current form.

Существует уже вопрос открыт на Trumbowyg Github относительно этой проблемы, но это большая модификация на основе плагина и при этом момент, он перенесен с вехи на рубеж с 2015 года.