feat(form): added a number-recommended type for validation

packages/form/src/text-field/__tests__/getErrorMessage.ts

@@ -110,6 +110,30 @@ describe("defaultGetErrorMessage", () => {
     validate("valueMissing", validationMessage);
   });
 
+  it("should only return the validity message when the validateOnChange is set to recommeded and one of the RECOMMENDED_NUMBER_STATE_KEYS are errored", () => {
+    const validate = (key: keyof ValidityState, expected: string): void => {
+      expect(
+        defaultGetErrorMessage({
+          ...OPTIONS,
+          validateOnChange: "number-recommended",
+          isBlurEvent: false,
+          validity: createValidity({ [key]: true }),
+        })
+      ).toBe(expected);
+    };
+
+    validate("badInput", validationMessage);
+    validate("customError", "");
+    validate("patternMismatch", "");
+    validate("rangeOverflow", validationMessage);
+    validate("rangeUnderflow", validationMessage);
+    validate("stepMismatch", "");
+    validate("tooLong", validationMessage);
+    validate("tooShort", validationMessage);
+    validate("typeMismatch", validationMessage);
+    validate("valueMissing", validationMessage);
+  });
+
   it("should only return the validation message for the provided validity state key", () => {
     const options: ErrorMessageOptions = {
       ...OPTIONS,

packages/form/src/text-field/getErrorMessage.ts

@@ -25,6 +25,7 @@ export type TextConstraints = Pick<
 export type ChangeValidationBehavior =
   | boolean
   | "recommended"
+  | "number-recommended"
   | keyof ValidityState
   | readonly (keyof ValidityState)[];
 
@@ -67,6 +68,7 @@ export interface ErrorMessageOptions extends TextConstraints {
  */
 export type GetErrorMessage = (options: ErrorMessageOptions) => string;
 
+/** @internal */
 const VALIDITY_STATE_KEYS: readonly (keyof ValidityState)[] = [
   "badInput",
   "customError",
@@ -81,12 +83,21 @@ const VALIDITY_STATE_KEYS: readonly (keyof ValidityState)[] = [
 ];
 
 /** @internal */
-const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [
+export const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [
   "badInput",
   "tooLong",
   "valueMissing",
 ];
 
+/** @internal */
+export const RECOMMENDED_NUMBER_STATE_KEYS: readonly (keyof ValidityState)[] = [
+  ...RECOMMENDED_STATE_KEYS,
+  "rangeOverflow",
+  "rangeUnderflow",
+  "tooShort",
+  "typeMismatch",
+];
+
 /**
  * The validation message is actually kind of weird since it's possible for a
  * form element to have multiple errors at once. The validation message will be
@@ -96,11 +107,16 @@ const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [
  *
  * @internal
  */
-const isRecommended = (validity: ValidityState): boolean =>
-  VALIDITY_STATE_KEYS.every((key) => {
+const isRecommended = (validity: ValidityState, isNumber: boolean): boolean => {
+  const errorable = isNumber
+    ? RECOMMENDED_NUMBER_STATE_KEYS
+    : RECOMMENDED_STATE_KEYS;
+
+  return VALIDITY_STATE_KEYS.every((key) => {
     const errored = validity[key];
-    return !errored || RECOMMENDED_STATE_KEYS.includes(key);
+    return !errored || errorable.includes(key);
   });
+};
 
 /**
  * The default implementation for getting an error message for the `TextField`
@@ -121,8 +137,13 @@ export const defaultGetErrorMessage: GetErrorMessage = ({
     return "";
   }
 
-  if (validateOnChange === "recommended") {
-    return isRecommended(validity) ? validationMessage : "";
+  if (
+    validateOnChange === "recommended" ||
+    validateOnChange === "number-recommended"
+  ) {
+    return isRecommended(validity, validateOnChange === "number-recommended")
+      ? validationMessage
+      : "";
   }
 
   const keys =