Add validation message for empty body

MaMpf-HD · Mar 19, 2024 · ebf95cb · ebf95cb
1 parent da0b409
commit ebf95cb
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/app/assets/javascripts/feedback.js b/app/assets/javascripts/feedback.js
@@ -27,32 +27,48 @@ function registerToasts() {
 }
 
 function registerSubmitButtonHandler() {
-  const submitButton = $("#submit-feedback-form-btn");
-
   // Invoke the hidden submit button inside the actual Rails form
   $("#submit-feedback-form-btn-outside").click(() => {
-    submitButton.click();
+    submitFeedback();
   });
 
   // Submit form by pressing Ctrl + Enter
   document.addEventListener("keydown", (event) => {
     const isModalOpen = $(SUBMIT_FEEDBACK_ID).is(":visible");
     if (isModalOpen && event.ctrlKey && event.key == "Enter") {
-      submitButton.click();
+      submitFeedback();
     }
   });
 }
 
 function registerFeedbackBodyValidator() {
   const feedbackBody = document.getElementById("feedback_feedback");
   feedbackBody.addEventListener("input", () => {
-    if (feedbackBody.validity.tooShort) {
-      const tooShortMessage = feedbackBody.dataset.tooShortMessage;
-      feedbackBody.setCustomValidity(tooShortMessage);
-    }
-    else {
-      // render input valid, so that form will submit
-      feedbackBody.setCustomValidity("");
-    }
+    validateFeedback();
   });
 }
+
+function validateFeedback() {
+  const feedbackBody = document.getElementById("feedback_feedback");
+  const validityState = feedbackBody.validity;
+  if (validityState.tooShort) {
+    const tooShortMessage = feedbackBody.dataset.tooShortMessage;
+    feedbackBody.setCustomValidity(tooShortMessage);
+  }
+  else if (validityState.valueMissing) {
+    const valueMissingMessage = feedbackBody.dataset.valueMissingMessage;
+    feedbackBody.setCustomValidity(valueMissingMessage);
+  }
+  else {
+    // render input valid, so that form will submit
+    feedbackBody.setCustomValidity("");
+  }
+
+  feedbackBody.reportValidity();
+}
+
+function submitFeedback() {
+  const submitButton = $("#submit-feedback-form-btn");
+  validateFeedback();
+  submitButton.click();
+}
diff --git a/app/views/feedbacks/_feedback_form.html.erb b/app/views/feedbacks/_feedback_form.html.erb
@@ -29,7 +29,8 @@
             minlength: Feedback::BODY_MIN_LENGTH,
             maxlength: Feedback::BODY_MAX_LENGTH,
             'data-too-short-message': t('feedback.body_too_short_error',
-                                min_length: Feedback::BODY_MIN_LENGTH) %>
+                                min_length: Feedback::BODY_MIN_LENGTH),
+            'data-value-missing-message': t('feedback.body_missing_error') %>
       <%= f.label :feedback, t('feedback.comment') %>
     </div>
 

diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -3813,6 +3813,8 @@ de:
       gerne auch über dieses Formular oder direkt per %{feedback_mail}.</p>
     body_too_short_error: >
       Dein Feedback ist zu kurz. Bitte gib mindestens %{min_length} Zeichen ein.
+    body_missing_error: >
+      Bitte gib hier Dein Feedback ein.
     mail_checkbox: >
       Erlaube es uns, Dich per E-Mail (%{user_mail}) zu kontaktieren, falls es
       Rückfragen zu Deinem Feedback gibt.

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -3606,6 +3606,8 @@ en:
       form or send an %{feedback_mail} directly.</p>
     body_too_short_error: >
       Your feedback is too short. Please enter at least %{min_length} characters.
+    body_missing_error: >
+      Please enter your feedback here.
     mail_checkbox: >
       Allow us to contact you via email (%{user_mail}) if there are questions
       about your feedback.