Require codereview to have content (#18156)

- Report a validityError when the codeReview have no comment.
- Resolves #18151
- Refactor

3 files changed, 38 insertions, 13 deletions

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(() => {