diff --git a/web_src/js/features/comp/CommentEasyMDE.js b/web_src/js/features/comp/CommentEasyMDE.js index 47e80e69c1..8efbe4d34d 100644 --- a/web_src/js/features/comp/CommentEasyMDE.js +++ b/web_src/js/features/comp/CommentEasyMDE.js @@ -96,3 +96,31 @@ export function getAttachedEasyMDE(el) { } return el._data_easyMDE; } + +/** + * validate if the given textarea from a form, is non-empty. + * @param {jQuery | HTMLElement} form + * @param {jQuery | HTMLElement} textarea + * @returns {boolean} returns true if validation succeeded. + */ +export function validateTextareaNonEmpty(form, textarea) { + if (form instanceof jQuery) { + form = form[0]; + } + if (textarea instanceof jQuery) { + textarea = textarea[0]; + } + + const $markdownEditorTextArea = $(getAttachedEasyMDE(textarea).codemirror.getInputField()); + // The original edit area HTML element is hidden and replaced by the + // SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty. + // This is a workaround for this upstream bug. + // See https://github.com/sparksuite/simplemde-markdown-editor/issues/324 + if (textarea.value.length) { + $markdownEditorTextArea.prop('required', true); + form.reportValidity(); + return false; + } + $markdownEditorTextArea.prop('required', false); + return true; +} diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index f8f6c38b76..d2502315b4 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -1,5 +1,6 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoIssueContentHistory} from './repo-issue-content.js'; +import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; const {csrfToken} = window.config; export function initRepoDiffReviewButton() { @@ -23,7 +24,13 @@ export function initRepoDiffFileViewToggle() { export function initRepoDiffConversationForm() { $(document).on('submit', '.conversation-holder form', async (e) => { e.preventDefault(); + const form = $(e.target); + const $textArea = form.find('textarea'); + if (!validateTextareaNonEmpty(form, $textArea)) { + return; + } + const newConversationHolder = $(await $.post(form.attr('action'), form.serialize())); const {path, side, idx} = newConversationHolder.data(); diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js index ee23dda8c4..c7b902d31d 100644 --- a/web_src/js/features/repo-wiki.js +++ b/web_src/js/features/repo-wiki.js @@ -1,4 +1,5 @@ import {initMarkupContent} from '../markup/content.js'; +import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; const {csrfToken} = window.config; @@ -121,19 +122,8 @@ export function initRepoWikiForm() { const $markdownEditorTextArea = $(easyMDE.codemirror.getInputField()); $markdownEditorTextArea.addClass('js-quick-submit'); - $form.on('submit', function (e) { - // The original edit area HTML element is hidden and replaced by the - // SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty. - // This is a workaround for this upstream bug. - // See https://github.com/sparksuite/simplemde-markdown-editor/issues/324 - const input = $editArea.val(); - if (!input.length) { - e.preventDefault(); - $markdownEditorTextArea.prop('required', true); - this.reportValidity(); - } else { - $markdownEditorTextArea.prop('required', false); - } + $form.on('submit', function () { + validateTextareaNonEmpty(this, $editArea); }); setTimeout(() => {