DEV: Add custom error messages to form template forms (#22169)

app/assets/javascripts/discourse/app/lib/form-template-validation.js

@@ -1,3 +1,5 @@
+import I18n from "I18n";
+
 export default function prepareFormTemplateData(form) {
   const formData = new FormData(form);
 
@@ -61,7 +63,7 @@ function _validateFormTemplateData(form) {
         field.insertAdjacentElement("afterend", errorBox);
       }
 
-      errorBox.textContent = field.validationMessage;
+      _showErrorMessage(field, errorBox);
     });
 
     // Mark the field as valid as changed:
@@ -80,3 +82,62 @@ function _validateFormTemplateData(form) {
     });
   });
 }
+
+function _showErrorMessage(field, element) {
+  if (field.validity.valueMissing) {
+    const prefix = "form_templates.errors.valueMissing";
+    const types = [
+      "select-one",
+      "select-multiple",
+      "checkbox",
+      "text",
+      "number",
+    ];
+    _showErrorByType(element, field, prefix, types);
+  } else if (field.validity.typeMismatch) {
+    const prefix = "form_templates.errors.typeMismatch";
+    const types = [
+      "color",
+      "date",
+      "email",
+      "number",
+      "password",
+      "tel",
+      "text",
+      "url",
+    ];
+    _showErrorByType(element, field, prefix, types);
+  } else if (field.validity.tooShort) {
+    element.textContent = I18n.t("form_templates.errors.tooShort", {
+      minLength: field.minLength,
+    });
+  } else if (field.validity.tooLong) {
+    element.textContent = I18n.t("form_templates.errors.tooLong", {
+      maxLength: field.maxLength,
+    });
+  } else if (field.validity.rangeOverflow) {
+    element.textContent = I18n.t("form_templates.errors.rangeOverflow", {
+      max: field.max,
+    });
+  } else if (field.validity.rangeUnderflow) {
+    element.textContent = I18n.t("form_templates.errors.rangeUnderflow", {
+      min: field.min,
+    });
+  } else if (field.validity.patternMismatch) {
+    element.textContent = I18n.t("form_templates.errors.patternMismatch");
+  } else if (field.validity.badInput) {
+    element.textContent = I18n.t("form_templates.errors.badInput");
+  }
+}
+
+function _showErrorByType(element, field, prefix, types) {
+  if (!types.includes(field.type)) {
+    element.textContent = I18n.t(`${prefix}.default`);
+  } else {
+    types.forEach((type) => {
+      if (field.type === type) {
+        element.textContent = I18n.t(`${prefix}.${type}`);
+      }
+    });
+  }
+}

config/locales/client.en.yml

@@ -4511,6 +4511,30 @@ en:
 
     form_template_chooser:
       select_template: "Select form templates"
+    form_templates:
+      errors:
+        valueMissing:
+          default: "Please fill out this field."
+          text: "Please fill out this field."
+          select-one: "Please select an item in the list."
+          select-multiple: "Please select at least one item in the list."
+          checkbox: "Please check this box if you want to proceed."
+        typeMismatch:
+          default: "Please enter a valid value."
+          color: "Please enter a color."
+          date: "Please enter a date."
+          email: "Please enter a valid email address."
+          number: "Please enter a number."
+          password: "Please enter a valid password."
+          tel: "Please enter a valid telephone number."
+          text: "Please enter a text value."
+          url: "Please enter a valid URL."
+        tooShort: "The input must be %{minLength} characters or longer."
+        tooLong: "The input must be less than %{maxLength} characters."
+        rangeOverflow: "The input must be less than %{max}."
+        rangeUnderflow: "The input must be more than %{min}."
+        patternMismatch: "Please match the requested format."
+        badInput: "Please enter a valid input."
 
   # This section is exported to the javascript for i18n in the admin section
   admin_js:

spec/system/composer/template_validation_spec.rb

@@ -51,16 +51,6 @@ describe "Composer Form Template Validations", type: :system, js: true do
   end
   let(:category_page) { PageObjects::Pages::Category.new }
   let(:composer) { PageObjects::Components::Composer.new }
-
-  let(:error_types) do
-    {
-      required_error: "Please fill out this field.",
-      type_error: "Please include an '@' in the email address. 'Bruce Wayne' is missing an '@'.",
-      min_error:
-        "Please lengthen this text to 10 characters or more (you are currently using 7 characters).",
-      pattern_error: "Please match the requested format.",
-    }
-  end
   let(:topic_title) { "A topic about Batman" }
 
   before do
@@ -79,7 +69,9 @@ describe "Composer Form Template Validations", type: :system, js: true do
     category_page.new_topic_button.click
     composer.fill_title(topic_title)
     composer.create
-    expect(composer).to have_form_template_field_error(error_types[:required_error])
+    expect(composer).to have_form_template_field_error(
+      I18n.t("js.form_templates.errors.valueMissing.default"),
+    )
   end
 
   it "shows an error when an input filled doesn't satisfy the type expected" do
@@ -88,7 +80,9 @@ describe "Composer Form Template Validations", type: :system, js: true do
     composer.fill_title(topic_title)
     composer.create
     composer.fill_form_template_field("input", "Bruce Wayne")
-    expect(composer).to have_form_template_field_error(error_types[:type_error])
+    expect(composer).to have_form_template_field_error(
+      I18n.t("js.form_templates.errors.typeMismatch.email"),
+    )
   end
 
   it "shows an error when an input doesn't satisfy the min length expected" do
@@ -97,7 +91,9 @@ describe "Composer Form Template Validations", type: :system, js: true do
     composer.fill_title(topic_title)
     composer.create
     composer.fill_form_template_field("input", "b@b.com")
-    expect(composer).to have_form_template_field_error(error_types[:min_error])
+    expect(composer).to have_form_template_field_error(
+      I18n.t("js.form_templates.errors.tooShort", minLength: 10),
+    )
   end
 
   it "shows an error when an input doesn't satisfy the requested pattern" do
@@ -106,6 +102,8 @@ describe "Composer Form Template Validations", type: :system, js: true do
     composer.fill_title(topic_title)
     composer.fill_form_template_field("input", "www.example.com")
     composer.create
-    expect(composer).to have_form_template_field_error(error_types[:pattern_error])
+    expect(composer).to have_form_template_field_error(
+      I18n.t("js.form_templates.errors.patternMismatch"),
+    )
   end
 end