DEV: Pluralize support for form template error strings (#22983)

app/assets/javascripts/discourse/app/components/form-template-field/input.hbs

@@ -6,7 +6,6 @@
         {{d-icon "asterisk" class="form-template-field__required-indicator"}}
       {{/if}}
     </label>
-
   {{/if}}
 
   <Input
@@ -16,7 +15,7 @@
     placeholder={{@attributes.placeholder}}
     required={{if @validations.required "required" ""}}
     pattern={{@validations.pattern}}
-    minLength={{@validations.min}}
-    maxLength={{@validations.max}}
+    minlength={{@validations.minimum}}
+    maxlength={{@validations.maximum}}
   />
 </div>

app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs

@@ -12,8 +12,8 @@
     class="form-template-field__textarea"
     placeholder={{@attributes.placeholder}}
     pattern={{@validations.pattern}}
-    minLength={{@validations.min}}
-    maxLength={{@validations.max}}
+    minlength={{@validations.minimum}}
+    maxlength={{@validations.maximum}}
     required={{if @validations.required "required" ""}}
   />
 </div>

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

@@ -109,19 +109,19 @@ function _showErrorMessage(field, element) {
     _showErrorByType(element, field, prefix, types);
   } else if (field.validity.tooShort) {
     element.textContent = I18n.t("form_templates.errors.tooShort", {
-      minLength: field.minLength,
+      count: field.minLength,
     });
   } else if (field.validity.tooLong) {
     element.textContent = I18n.t("form_templates.errors.tooLong", {
-      maxLength: field.maxLength,
+      count: field.maxLength,
     });
   } else if (field.validity.rangeOverflow) {
     element.textContent = I18n.t("form_templates.errors.rangeOverflow", {
-      max: field.max,
+      count: field.max,
     });
   } else if (field.validity.rangeUnderflow) {
     element.textContent = I18n.t("form_templates.errors.rangeUnderflow", {
-      min: field.min,
+      count: field.min,
     });
   } else if (field.validity.patternMismatch) {
     element.textContent = I18n.t("form_templates.errors.patternMismatch");

config/locales/client.en.yml

@@ -4568,10 +4568,18 @@ en:
           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}."
+        tooShort:
+          one: "The input must be %{count} character or longer."
+          other: "The input must be %{count} characters or longer."
+        tooLong:
+          one: "The input must be less than %{count} character."
+          other: "The input must be less than %{count} characters."
+        rangeOverflow:
+          one: "The input must be less than %{count}."
+          other: "The input must be less than %{count}."
+        rangeUnderflow:
+          one: "The input must be more than %{count}."
+          other: "The input must be more than %{count}."
         patternMismatch: "Please match the requested format."
         badInput: "Please enter a valid input."
 

spec/system/composer/template_validation_spec.rb

@@ -14,7 +14,7 @@ describe "Composer Form Template Validations", type: :system, js: true do
   validations:
     required: true
     type: email
-    min: 10",
+    minimum: 10",
     )
   end
 
@@ -92,7 +92,7 @@ describe "Composer Form Template Validations", type: :system, js: true do
     composer.create
     composer.fill_form_template_field("input", "b@b.com")
     expect(composer).to have_form_template_field_error(
-      I18n.t("js.form_templates.errors.tooShort", minLength: 10),
+      I18n.t("js.form_templates.errors.tooShort", count: 10),
     )
   end