@bsol-oss/react-datatable5 12.0.0-beta.55 → 12.0.0-beta.57

package/README.md

@@ -8,6 +8,12 @@ The datetable package is built on top of `@tanstack/react-table` and `chakra-ui`
 npm install @tanstack/react-table @chakra-ui/react @emotion/react @bsol-oss/react-datatable5
 ```
 
+For form validation features with internationalization support, also install:
+
+```bash
+npm install ajv ajv-formats ajv-i18n
+```
+
 ## Usage
 
 ### Hook
@@ -82,6 +88,192 @@ GET http://localhost:8081/api/g/core_people?offset=0&limit=10&sorting[0][id]=id&
 </DataTable>
 ```
 
+### Form Validation with AJV and Internationalization
+
+The package now includes built-in JSON Schema validation using AJV (Another JSON Schema Validator) with format support and comprehensive internationalization (i18n) capabilities, including full Traditional Chinese (Hong Kong/Taiwan) support.
+
+#### Features
+
+- **JSON Schema Validation**: Full JSON Schema Draft 7 support
+- **Format Validation**: Built-in support for date, time, email, UUID, and other formats via `ajv-formats`
+- **Multi-language Support**: Complete i18n support with Traditional Chinese (Hong Kong/Taiwan) and Simplified Chinese
+- **Enhanced Error Messages**: Culturally appropriate error messages in multiple languages
+- **Automatic Validation**: Validation occurs before form submission and confirmation
+- **Custom Error Display**: Collapsible error panels with localized validation feedback
+
+#### Supported Languages
+
+- **🇺🇸 English (en)** - Default language
+- **🇭🇰 Traditional Chinese - Hong Kong (zh-HK)** - 繁體中文（香港）
+- **🇹🇼 Traditional Chinese - Taiwan (zh-TW)** - 繁體中文（台灣）
+- **🇨🇳 Simplified Chinese (zh-CN, zh)** - 简体中文
+
+#### Basic Usage with Internationalization
+
+```tsx
+import { FormRoot, FormBody, validateData, SupportedLocale } from "@bsol-oss/react-datatable5";
+
+const schema = {
+  type: "object",
+  required: ["email", "age"],
+  properties: {
+    email: {
+      type: "string",
+      format: "email"
+    },
+    age: {
+      type: "integer",
+      minimum: 18,
+      maximum: 120
+    },
+    name: {
+      type: "string",
+      minLength: 2,
+      maxLength: 50
+    }
+  }
+};
+
+// Use Traditional Chinese (Hong Kong) for validation errors
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-HK"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+#### Language-specific Examples
+
+**Traditional Chinese (Hong Kong):**
+```tsx
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-HK"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+**Traditional Chinese (Taiwan):**
+```tsx
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-TW"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+**Simplified Chinese:**
+```tsx
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-CN"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+#### Manual Validation with Internationalization
+
+You can also use the validation utilities directly with language support:
+
+```tsx
+import { validateData, ValidationResult, SupportedLocale } from "@bsol-oss/react-datatable5";
+
+// Validate with Traditional Chinese (Hong Kong) error messages
+const result: ValidationResult = validateData(formData, schema, { 
+  locale: 'zh-HK' 
+});
+
+if (!result.isValid) {
+  console.log("驗證錯誤:", result.errors);
+  // Error messages will be in Traditional Chinese
+}
+
+// Check supported locales
+import { getSupportedLocales, isLocaleSupported } from "@bsol-oss/react-datatable5";
+
+const supportedLocales = getSupportedLocales(); // ['en', 'zh-HK', 'zh-TW', 'zh-CN', 'zh']
+const isSupported = isLocaleSupported('zh-HK'); // true
+```
+
+#### Validation Error Structure
+
+```tsx
+interface ValidationError {
+  field: string;        // The field that failed validation
+  message: string;      // User-friendly error message (localized)
+  value?: unknown;      // The current value that failed
+  schemaPath?: string;  // JSON Schema path for debugging
+}
+```
+
+#### Dynamic Language Switching
+
+```tsx
+import { SupportedLocale } from "@bsol-oss/react-datatable5";
+
+const MyForm = () => {
+  const [locale, setLocale] = useState<SupportedLocale>('zh-HK');
+  
+  return (
+    <div>
+      {/* Language selector */}
+      <select value={locale} onChange={(e) => setLocale(e.target.value as SupportedLocale)}>
+        <option value="en">English</option>
+        <option value="zh-HK">繁體中文（香港）</option>
+        <option value="zh-TW">繁體中文（台灣）</option>
+        <option value="zh-CN">简体中文</option>
+      </select>
+      
+      {/* Form with dynamic locale */}
+      <FormRoot 
+        schema={schema} 
+        validationLocale={locale}
+        /* other props */
+      >
+        <FormBody />
+      </FormRoot>
+    </div>
+  );
+};
+```
+
+#### Example Validation Messages
+
+**English:**
+- "email is required"
+- "Invalid email format"
+- "Must be at least 18"
+
+**Traditional Chinese (Hong Kong/Taiwan):**
+- "email 為必填"
+- "無效的 email 格式"
+- "必須至少為 18"
+
+**Simplified Chinese:**
+- "email 为必填"
+- "无效的 email 格式"
+- "必须至少为 18"
+
+#### Supported Validation Types
+
+- **Type validation**: string, number, integer, boolean, object, array
+- **Format validation**: email, date, time, date-time, uuid, uri, etc.
+- **String constraints**: minLength, maxLength, pattern (regex)
+- **Numeric constraints**: minimum, maximum, multipleOf
+- **Array constraints**: minItems, maxItems, uniqueItems
+- **Object constraints**: required properties, additionalProperties
+- **Enum validation**: restricted value sets
+
+All validation types are fully supported across all languages with culturally appropriate translations.
+
 For more details of props and examples, please review the stories in storybook platform.
 
 ## Development

package/dist/index.d.ts

@@ -11,10 +11,12 @@ import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { UseQueryResult } from '@tanstack/react-query';
 import { JSONSchema7 } from 'json-schema';
 import { ForeignKeyProps as ForeignKeyProps$1 } from '@/components/Form/components/fields/StringInputField';
+import { SupportedLocale as SupportedLocale$1 } from '@/components/Form/utils/validation';
 import { AxiosRequestConfig } from 'axios';
 import * as react_hook_form from 'react-hook-form';
 import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
 import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
+import * as ajv_i18n_localize_types from 'ajv-i18n/localize/types';
 
 interface DensityToggleButtonProps {
     icon?: React__default.ReactElement;
@@ -546,6 +548,8 @@ interface FormRootProps<TData extends FieldValues> {
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
+    customErrorRenderer?: (error: unknown) => ReactNode;
+    validationLocale?: SupportedLocale$1;
 }
 interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -562,7 +566,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, validationLocale, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
@@ -637,6 +641,54 @@ interface RecordDisplayProps {
 }
 declare const RecordDisplay: ({ object, boxProps, translate, prefix, }: RecordDisplayProps) => react_jsx_runtime.JSX.Element;
 
+declare const localize: {
+    en: () => void;
+    'zh-HK': ajv_i18n_localize_types.Localize;
+    'zh-TW': ajv_i18n_localize_types.Localize;
+    'zh-CN': ajv_i18n_localize_types.Localize;
+    zh: ajv_i18n_localize_types.Localize;
+};
+type SupportedLocale = keyof typeof localize;
+interface ValidationError {
+    field: string;
+    message: string;
+    value?: unknown;
+    schemaPath?: string;
+}
+interface ValidationResult {
+    isValid: boolean;
+    errors: ValidationError[];
+}
+interface ValidationOptions {
+    locale?: SupportedLocale;
+}
+/**
+ * Validates data against a JSON Schema using AJV with i18n support
+ * @param data - The data to validate
+ * @param schema - The JSON Schema to validate against
+ * @param options - Validation options including locale
+ * @returns ValidationResult containing validation status and errors
+ */
+declare const validateData: (data: unknown, schema: JSONSchema7, options?: ValidationOptions) => ValidationResult;
+/**
+ * Creates a reusable validator function for a specific schema with i18n support
+ * @param schema - The JSON Schema to create validator for
+ * @param locale - The locale to use for error messages
+ * @returns A function that validates data against the schema
+ */
+declare const createSchemaValidator: (schema: JSONSchema7, locale?: SupportedLocale) => (data: unknown) => ValidationResult;
+/**
+ * Get available locales for validation error messages
+ * @returns Array of supported locale codes
+ */
+declare const getSupportedLocales: () => SupportedLocale[];
+/**
+ * Check if a locale is supported
+ * @param locale - The locale to check
+ * @returns Boolean indicating if the locale is supported
+ */
+declare const isLocaleSupported: (locale: string) => locale is "en" | "zh-HK" | "zh-TW" | "zh-CN" | "zh";
+
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue> {
         /**
@@ -709,4 +761,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, type SupportedLocale, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationError, type ValidationOptions, type ValidationResult, ViewDialog, createSchemaValidator, getColumns, getMultiDates, getRangeDates, getSupportedLocales, idPickerSanityCheck, isLocaleSupported, useDataTable, useDataTableContext, useDataTableServer, useForm, validateData, widthSanityCheck };

package/dist/index.js

@@ -29,6 +29,10 @@ var gr = require('react-icons/gr');
 var reactI18next = require('react-i18next');
 var axios = require('axios');
 var reactHookForm = require('react-hook-form');
+var Ajv = require('ajv');
+var addFormats = require('ajv-formats');
+var zh_TW = require('ajv-i18n/localize/zh-TW');
+var zh_CN = require('ajv-i18n/localize/zh');
 var dayjs = require('dayjs');
 var utc = require('dayjs/plugin/utc');
 var ti = require('react-icons/ti');
@@ -3160,7 +3164,9 @@ const TableBody = ({ showSelector = false, canResize = true, }) => {
             return (jsxRuntime.jsxs(react.Table.Row, { display: "flex", zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsxRuntime.jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow })), row.getVisibleCells().map((cell, index) => {
                         return (jsxRuntime.jsx(react.Table.Cell, { padding: `${table.getDensityValue()}px`, 
                             // styling resize and pinning start
-                            flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, minWidth: `0`, color: {
+                            flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, 
+                            // this is to avoid the cell from being too wide
+                            minWidth: `0`, color: {
                                 base: "colorPalette.900",
                                 _dark: "colorPalette.100",
                             },
@@ -3686,6 +3692,7 @@ const SchemaFormContext = React.createContext({
     onSubmit: async () => { },
     rowNumber: 0,
     requestOptions: {},
+    validationLocale: 'en',
 });
 
 const useSchemaContext = () => {
@@ -3696,6 +3703,179 @@ const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
 
+// AJV i18n support
+const localize = {
+    en: () => { }, // English is default, no localization needed
+    'zh-HK': zh_TW, // Use zh-TW for Hong Kong Traditional Chinese
+    'zh-TW': zh_TW, // Traditional Chinese (Taiwan)
+    'zh-CN': zh_CN, // Simplified Chinese
+    'zh': zh_CN, // Simplified Chinese (short form)
+};
+// Create AJV instance with format support
+const createValidator = () => {
+    const ajv = new Ajv({
+        allErrors: true,
+        verbose: true,
+        removeAdditional: false,
+        strict: false,
+        messages: false, // Disable default messages for i18n
+    });
+    // Add format validation support (date, time, email, etc.)
+    addFormats(ajv);
+    return ajv;
+};
+/**
+ * Validates data against a JSON Schema using AJV with i18n support
+ * @param data - The data to validate
+ * @param schema - The JSON Schema to validate against
+ * @param options - Validation options including locale
+ * @returns ValidationResult containing validation status and errors
+ */
+const validateData = (data, schema, options = {}) => {
+    const { locale = 'en' } = options;
+    const ajv = createValidator();
+    try {
+        const validate = ajv.compile(schema);
+        const isValid = validate(data);
+        if (isValid) {
+            return {
+                isValid: true,
+                errors: [],
+            };
+        }
+        // Apply localization if not English
+        if (locale !== 'en' && validate.errors && localize[locale]) {
+            try {
+                localize[locale](validate.errors);
+            }
+            catch (error) {
+                console.warn(`Failed to localize validation errors to ${locale}:`, error);
+            }
+        }
+        const errors = (validate.errors || []).map((error) => {
+            const field = error.instancePath?.replace(/^\//, '') || error.schemaPath?.split('/').pop() || 'root';
+            let message = error.message || 'Validation error';
+            // Enhanced error messages for better UX (only if using English or localization failed)
+            if (locale === 'en' || !error.message) {
+                switch (error.keyword) {
+                    case 'required':
+                        message = `${error.params?.missingProperty || 'Field'} is required`;
+                        break;
+                    case 'format':
+                        message = `Invalid ${error.params?.format} format`;
+                        break;
+                    case 'type':
+                        message = `Expected ${error.params?.type}, got ${typeof error.data}`;
+                        break;
+                    case 'minLength':
+                        message = `Must be at least ${error.params?.limit} characters`;
+                        break;
+                    case 'maxLength':
+                        message = `Must be no more than ${error.params?.limit} characters`;
+                        break;
+                    case 'minimum':
+                        message = `Must be at least ${error.params?.limit}`;
+                        break;
+                    case 'maximum':
+                        message = `Must be no more than ${error.params?.limit}`;
+                        break;
+                    case 'pattern':
+                        message = `Does not match required pattern`;
+                        break;
+                    case 'enum':
+                        message = `Must be one of: ${error.params?.allowedValues?.join(', ')}`;
+                        break;
+                    default:
+                        message = error.message || 'Validation error';
+                }
+            }
+            return {
+                field: field || error.instancePath || 'unknown',
+                message,
+                value: error.data,
+                schemaPath: error.schemaPath,
+            };
+        });
+        return {
+            isValid: false,
+            errors,
+        };
+    }
+    catch (error) {
+        // Handle AJV compilation errors
+        const errorMessage = locale === 'zh-HK' || locale === 'zh-TW'
+            ? `架構驗證錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`
+            : locale === 'zh-CN' || locale === 'zh'
+                ? `模式验证错误: ${error instanceof Error ? error.message : '未知错误'}`
+                : `Schema validation error: ${error instanceof Error ? error.message : 'Unknown error'}`;
+        return {
+            isValid: false,
+            errors: [
+                {
+                    field: 'schema',
+                    message: errorMessage,
+                },
+            ],
+        };
+    }
+};
+/**
+ * Creates a reusable validator function for a specific schema with i18n support
+ * @param schema - The JSON Schema to create validator for
+ * @param locale - The locale to use for error messages
+ * @returns A function that validates data against the schema
+ */
+const createSchemaValidator = (schema, locale = 'en') => {
+    const ajv = createValidator();
+    const validate = ajv.compile(schema);
+    return (data) => {
+        const isValid = validate(data);
+        if (isValid) {
+            return {
+                isValid: true,
+                errors: [],
+            };
+        }
+        // Apply localization if not English
+        if (locale !== 'en' && validate.errors && localize[locale]) {
+            try {
+                localize[locale](validate.errors);
+            }
+            catch (error) {
+                console.warn(`Failed to localize validation errors to ${locale}:`, error);
+            }
+        }
+        const errors = (validate.errors || []).map((error) => {
+            const field = error.instancePath?.replace(/^\//, '') || 'root';
+            return {
+                field,
+                message: error.message || 'Validation error',
+                value: error.data,
+                schemaPath: error.schemaPath,
+            };
+        });
+        return {
+            isValid: false,
+            errors,
+        };
+    };
+};
+/**
+ * Get available locales for validation error messages
+ * @returns Array of supported locale codes
+ */
+const getSupportedLocales = () => {
+    return Object.keys(localize);
+};
+/**
+ * Check if a locale is supported
+ * @param locale - The locale to check
+ * @returns Boolean indicating if the locale is supported
+ */
+const isLocaleSupported = (locale) => {
+    return locale in localize;
+};
+
 const idPickerSanityCheck = (column, foreign_key) => {
     if (!!foreign_key == false) {
         throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
@@ -3711,7 +3891,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, }) => {
+const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, validationLocale = 'en', }) => {
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
     const [isSubmiting, setIsSubmiting] = React.useState(false);
@@ -3744,6 +3924,8 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             error,
             setError,
             getUpdatedData,
+            customErrorRenderer,
+            validationLocale,
         }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
 };
 
@@ -4639,7 +4821,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
 
 const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
     const { children, ...rest } = props;
-    return (jsxRuntime.jsxs(react.NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: [children, jsxRuntime.jsxs(react.NumberInput.Control, { children: [jsxRuntime.jsx(react.NumberInput.IncrementTrigger, {}), jsxRuntime.jsx(react.NumberInput.DecrementTrigger, {})] })] }));
+    return (jsxRuntime.jsx(react.NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: children }));
 });
 const NumberInputField$1 = react.NumberInput.Input;
 react.NumberInput.Scrubber;
@@ -5467,10 +5649,28 @@ const ColumnViewer = ({ column, properties, prefix, }) => {
 };
 
 const SubmitButton = () => {
-    const { translate, setValidatedData, setIsError, setIsConfirming } = useSchemaContext();
+    const { translate, setValidatedData, setIsError, setIsConfirming, setError, schema, validationLocale } = useSchemaContext();
     const methods = reactHookForm.useFormContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onValid = (data) => {
+        // Validate data using AJV before proceeding to confirmation
+        const validationResult = validateData(data, schema, { locale: validationLocale });
+        if (!validationResult.isValid) {
+            // Set validation errors with i18n support
+            const validationErrorMessage = {
+                type: 'validation',
+                errors: validationResult.errors,
+                message: validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+                    ? '表單驗證失敗'
+                    : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                        ? '表单验证失败'
+                        : 'Form validation failed'
+            };
+            setError(validationErrorMessage);
+            setIsError(true);
+            return;
+        }
+        // If validation passes, proceed to confirmation
         setValidatedData(data);
         setIsError(false);
         setIsConfirming(true);
@@ -5481,7 +5681,7 @@ const SubmitButton = () => {
 };
 
 const FormBody = () => {
-    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, validationLocale, } = useSchemaContext();
     const methods = reactHookForm.useFormContext();
     const { properties } = schema;
     const onBeforeSubmit = () => {
@@ -5497,6 +5697,27 @@ const FormBody = () => {
     const onSubmitSuccess = () => {
         setIsSuccess(true);
     };
+    // Enhanced validation function using AJV with i18n support
+    const validateFormData = (data) => {
+        try {
+            const validationResult = validateData(data, schema, { locale: validationLocale });
+            return validationResult;
+        }
+        catch (error) {
+            const errorMessage = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+                ? `驗證錯誤: ${error instanceof Error ? error.message : '未知驗證錯誤'}`
+                : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                    ? `验证错误: ${error instanceof Error ? error.message : '未知验证错误'}`
+                    : `Validation error: ${error instanceof Error ? error.message : 'Unknown validation error'}`;
+            return {
+                isValid: false,
+                errors: [{
+                        field: 'validation',
+                        message: errorMessage
+                    }]
+            };
+        }
+    };
     const defaultOnSubmit = async (promise) => {
         try {
             onBeforeSubmit();
@@ -5521,12 +5742,47 @@ const FormBody = () => {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onFormSubmit = async (data) => {
+        // Validate data using AJV before submission
+        const validationResult = validateFormData(data);
+        if (!validationResult.isValid) {
+            // Set validation errors
+            const validationErrorMessage = {
+                type: 'validation',
+                errors: validationResult.errors,
+                message: validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+                    ? '表單驗證失敗'
+                    : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                        ? '表单验证失败'
+                        : 'Form validation failed'
+            };
+            onSubmitError(validationErrorMessage);
+            return;
+        }
         if (onSubmit === undefined) {
             await defaultOnSubmit(defaultSubmitPromise(data));
             return;
         }
         await defaultOnSubmit(onSubmit(data));
     };
+    // Custom error renderer for validation errors with i18n support
+    const renderValidationErrors = (validationErrors) => {
+        const title = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+            ? `表單驗證失敗 (${validationErrors.length} 個錯誤${validationErrors.length > 1 ? '' : ''})`
+            : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                ? `表单验证失败 (${validationErrors.length} 个错误${validationErrors.length > 1 ? '' : ''})`
+                : `Form Validation Failed (${validationErrors.length} error${validationErrors.length > 1 ? 's' : ''})`;
+        const formLabel = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+            ? '表單'
+            : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                ? '表单'
+                : 'Form';
+        const currentValueLabel = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+            ? '目前值:'
+            : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                ? '当前值:'
+                : 'Current value:';
+        return (jsxRuntime.jsxs(react.Alert.Root, { status: "error", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "validation-errors", children: [jsxRuntime.jsx(AccordionItemTrigger, { children: title }), jsxRuntime.jsx(AccordionItemContent, { children: jsxRuntime.jsx(react.Box, { mt: 2, children: validationErrors.map((err, index) => (jsxRuntime.jsxs(react.Box, { mb: 2, p: 2, bg: "red.50", borderLeft: "4px solid", borderColor: "red.500", children: [jsxRuntime.jsxs(react.Text, { fontWeight: "bold", color: "red.700", children: [err.field === 'root' ? formLabel : err.field, ":"] }), jsxRuntime.jsx(react.Text, { color: "red.600", children: err.message }), err.value !== undefined && (jsxRuntime.jsxs(react.Text, { fontSize: "sm", color: "red.500", mt: 1, children: [currentValueLabel, " ", JSON.stringify(err.value)] }))] }, index))) }) })] }) }) })] }));
+    };
     const renderColumns = ({ order, keys, ignore, include, }) => {
         const included = include.length > 0 ? include : keys;
         const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
@@ -5562,7 +5818,7 @@ const FormBody = () => {
                                 setIsConfirming(false);
                             }, variant: "subtle", children: translate.t("cancel") }), jsxRuntime.jsx(react.Button, { onClick: () => {
                                 onFormSubmit(validatedData);
-                            }, children: translate.t("confirm") })] }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
+                            }, children: translate.t("confirm") })] }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: customErrorRenderer ? (customErrorRenderer(error)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: error?.type === 'validation' && error?.errors ? (renderValidationErrors(error.errors)) : (jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) })) })) }))] }));
     }
     return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: ordered.map((column) => {
                     return (jsxRuntime.jsx(ColumnRenderer
@@ -5572,7 +5828,7 @@ const FormBody = () => {
                         properties: properties, prefix: ``, column }, `form-input-${column}`));
                 }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(react.Button, { onClick: () => {
                             methods.reset();
-                        }, variant: "subtle", children: translate.t("reset") }), jsxRuntime.jsx(SubmitButton, {})] })] }));
+                        }, variant: "subtle", children: translate.t("reset") }), jsxRuntime.jsx(SubmitButton, {})] }), isError && error?.type === 'validation' && (jsxRuntime.jsx(react.Box, { mt: 4, children: error?.errors && renderValidationErrors(error.errors) }))] }));
 };
 
 const FormTitle = () => {
@@ -5655,12 +5911,16 @@ exports.TableSorter = TableSorter;
 exports.TableViewer = TableViewer;
 exports.TextCell = TextCell;
 exports.ViewDialog = ViewDialog;
+exports.createSchemaValidator = createSchemaValidator;
 exports.getColumns = getColumns;
 exports.getMultiDates = getMultiDates;
 exports.getRangeDates = getRangeDates;
+exports.getSupportedLocales = getSupportedLocales;
 exports.idPickerSanityCheck = idPickerSanityCheck;
+exports.isLocaleSupported = isLocaleSupported;
 exports.useDataTable = useDataTable;
 exports.useDataTableContext = useDataTableContext;
 exports.useDataTableServer = useDataTableServer;
 exports.useForm = useForm;
+exports.validateData = validateData;
 exports.widthSanityCheck = widthSanityCheck;

package/dist/index.mjs

@@ -28,6 +28,10 @@ import { GrAscend, GrDescend } from 'react-icons/gr';
 import { useTranslation } from 'react-i18next';
 import axios from 'axios';
 import { FormProvider, useFormContext, useForm as useForm$1 } from 'react-hook-form';
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
+import zh_TW from 'ajv-i18n/localize/zh-TW';
+import zh_CN from 'ajv-i18n/localize/zh';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { TiDeleteOutline } from 'react-icons/ti';
@@ -3140,7 +3144,9 @@ const TableBody = ({ showSelector = false, canResize = true, }) => {
             return (jsxs(Table$1.Row, { display: "flex", zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow })), row.getVisibleCells().map((cell, index) => {
                         return (jsx(Table$1.Cell, { padding: `${table.getDensityValue()}px`, 
                             // styling resize and pinning start
-                            flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, minWidth: `0`, color: {
+                            flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, 
+                            // this is to avoid the cell from being too wide
+                            minWidth: `0`, color: {
                                 base: "colorPalette.900",
                                 _dark: "colorPalette.100",
                             },
@@ -3666,6 +3672,7 @@ const SchemaFormContext = createContext({
     onSubmit: async () => { },
     rowNumber: 0,
     requestOptions: {},
+    validationLocale: 'en',
 });
 
 const useSchemaContext = () => {
@@ -3676,6 +3683,179 @@ const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
 
+// AJV i18n support
+const localize = {
+    en: () => { }, // English is default, no localization needed
+    'zh-HK': zh_TW, // Use zh-TW for Hong Kong Traditional Chinese
+    'zh-TW': zh_TW, // Traditional Chinese (Taiwan)
+    'zh-CN': zh_CN, // Simplified Chinese
+    'zh': zh_CN, // Simplified Chinese (short form)
+};
+// Create AJV instance with format support
+const createValidator = () => {
+    const ajv = new Ajv({
+        allErrors: true,
+        verbose: true,
+        removeAdditional: false,
+        strict: false,
+        messages: false, // Disable default messages for i18n
+    });
+    // Add format validation support (date, time, email, etc.)
+    addFormats(ajv);
+    return ajv;
+};
+/**
+ * Validates data against a JSON Schema using AJV with i18n support
+ * @param data - The data to validate
+ * @param schema - The JSON Schema to validate against
+ * @param options - Validation options including locale
+ * @returns ValidationResult containing validation status and errors
+ */
+const validateData = (data, schema, options = {}) => {
+    const { locale = 'en' } = options;
+    const ajv = createValidator();
+    try {
+        const validate = ajv.compile(schema);
+        const isValid = validate(data);
+        if (isValid) {
+            return {
+                isValid: true,
+                errors: [],
+            };
+        }
+        // Apply localization if not English
+        if (locale !== 'en' && validate.errors && localize[locale]) {
+            try {
+                localize[locale](validate.errors);
+            }
+            catch (error) {
+                console.warn(`Failed to localize validation errors to ${locale}:`, error);
+            }
+        }
+        const errors = (validate.errors || []).map((error) => {
+            const field = error.instancePath?.replace(/^\//, '') || error.schemaPath?.split('/').pop() || 'root';
+            let message = error.message || 'Validation error';
+            // Enhanced error messages for better UX (only if using English or localization failed)
+            if (locale === 'en' || !error.message) {
+                switch (error.keyword) {
+                    case 'required':
+                        message = `${error.params?.missingProperty || 'Field'} is required`;
+                        break;
+                    case 'format':
+                        message = `Invalid ${error.params?.format} format`;
+                        break;
+                    case 'type':
+                        message = `Expected ${error.params?.type}, got ${typeof error.data}`;
+                        break;
+                    case 'minLength':
+                        message = `Must be at least ${error.params?.limit} characters`;
+                        break;
+                    case 'maxLength':
+                        message = `Must be no more than ${error.params?.limit} characters`;
+                        break;
+                    case 'minimum':
+                        message = `Must be at least ${error.params?.limit}`;
+                        break;
+                    case 'maximum':
+                        message = `Must be no more than ${error.params?.limit}`;
+                        break;
+                    case 'pattern':
+                        message = `Does not match required pattern`;
+                        break;
+                    case 'enum':
+                        message = `Must be one of: ${error.params?.allowedValues?.join(', ')}`;
+                        break;
+                    default:
+                        message = error.message || 'Validation error';
+                }
+            }
+            return {
+                field: field || error.instancePath || 'unknown',
+                message,
+                value: error.data,
+                schemaPath: error.schemaPath,
+            };
+        });
+        return {
+            isValid: false,
+            errors,
+        };
+    }
+    catch (error) {
+        // Handle AJV compilation errors
+        const errorMessage = locale === 'zh-HK' || locale === 'zh-TW'
+            ? `架構驗證錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`
+            : locale === 'zh-CN' || locale === 'zh'
+                ? `模式验证错误: ${error instanceof Error ? error.message : '未知错误'}`
+                : `Schema validation error: ${error instanceof Error ? error.message : 'Unknown error'}`;
+        return {
+            isValid: false,
+            errors: [
+                {
+                    field: 'schema',
+                    message: errorMessage,
+                },
+            ],
+        };
+    }
+};
+/**
+ * Creates a reusable validator function for a specific schema with i18n support
+ * @param schema - The JSON Schema to create validator for
+ * @param locale - The locale to use for error messages
+ * @returns A function that validates data against the schema
+ */
+const createSchemaValidator = (schema, locale = 'en') => {
+    const ajv = createValidator();
+    const validate = ajv.compile(schema);
+    return (data) => {
+        const isValid = validate(data);
+        if (isValid) {
+            return {
+                isValid: true,
+                errors: [],
+            };
+        }
+        // Apply localization if not English
+        if (locale !== 'en' && validate.errors && localize[locale]) {
+            try {
+                localize[locale](validate.errors);
+            }
+            catch (error) {
+                console.warn(`Failed to localize validation errors to ${locale}:`, error);
+            }
+        }
+        const errors = (validate.errors || []).map((error) => {
+            const field = error.instancePath?.replace(/^\//, '') || 'root';
+            return {
+                field,
+                message: error.message || 'Validation error',
+                value: error.data,
+                schemaPath: error.schemaPath,
+            };
+        });
+        return {
+            isValid: false,
+            errors,
+        };
+    };
+};
+/**
+ * Get available locales for validation error messages
+ * @returns Array of supported locale codes
+ */
+const getSupportedLocales = () => {
+    return Object.keys(localize);
+};
+/**
+ * Check if a locale is supported
+ * @param locale - The locale to check
+ * @returns Boolean indicating if the locale is supported
+ */
+const isLocaleSupported = (locale) => {
+    return locale in localize;
+};
+
 const idPickerSanityCheck = (column, foreign_key) => {
     if (!!foreign_key == false) {
         throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
@@ -3691,7 +3871,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, }) => {
+const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, validationLocale = 'en', }) => {
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isSubmiting, setIsSubmiting] = useState(false);
@@ -3724,6 +3904,8 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             error,
             setError,
             getUpdatedData,
+            customErrorRenderer,
+            validationLocale,
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
 
@@ -4619,7 +4801,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
 
 const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
     const { children, ...rest } = props;
-    return (jsxs(NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: [children, jsxs(NumberInput.Control, { children: [jsx(NumberInput.IncrementTrigger, {}), jsx(NumberInput.DecrementTrigger, {})] })] }));
+    return (jsx(NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: children }));
 });
 const NumberInputField$1 = NumberInput.Input;
 NumberInput.Scrubber;
@@ -5447,10 +5629,28 @@ const ColumnViewer = ({ column, properties, prefix, }) => {
 };
 
 const SubmitButton = () => {
-    const { translate, setValidatedData, setIsError, setIsConfirming } = useSchemaContext();
+    const { translate, setValidatedData, setIsError, setIsConfirming, setError, schema, validationLocale } = useSchemaContext();
     const methods = useFormContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onValid = (data) => {
+        // Validate data using AJV before proceeding to confirmation
+        const validationResult = validateData(data, schema, { locale: validationLocale });
+        if (!validationResult.isValid) {
+            // Set validation errors with i18n support
+            const validationErrorMessage = {
+                type: 'validation',
+                errors: validationResult.errors,
+                message: validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+                    ? '表單驗證失敗'
+                    : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                        ? '表单验证失败'
+                        : 'Form validation failed'
+            };
+            setError(validationErrorMessage);
+            setIsError(true);
+            return;
+        }
+        // If validation passes, proceed to confirmation
         setValidatedData(data);
         setIsError(false);
         setIsConfirming(true);
@@ -5461,7 +5661,7 @@ const SubmitButton = () => {
 };
 
 const FormBody = () => {
-    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, validationLocale, } = useSchemaContext();
     const methods = useFormContext();
     const { properties } = schema;
     const onBeforeSubmit = () => {
@@ -5477,6 +5677,27 @@ const FormBody = () => {
     const onSubmitSuccess = () => {
         setIsSuccess(true);
     };
+    // Enhanced validation function using AJV with i18n support
+    const validateFormData = (data) => {
+        try {
+            const validationResult = validateData(data, schema, { locale: validationLocale });
+            return validationResult;
+        }
+        catch (error) {
+            const errorMessage = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+                ? `驗證錯誤: ${error instanceof Error ? error.message : '未知驗證錯誤'}`
+                : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                    ? `验证错误: ${error instanceof Error ? error.message : '未知验证错误'}`
+                    : `Validation error: ${error instanceof Error ? error.message : 'Unknown validation error'}`;
+            return {
+                isValid: false,
+                errors: [{
+                        field: 'validation',
+                        message: errorMessage
+                    }]
+            };
+        }
+    };
     const defaultOnSubmit = async (promise) => {
         try {
             onBeforeSubmit();
@@ -5501,12 +5722,47 @@ const FormBody = () => {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onFormSubmit = async (data) => {
+        // Validate data using AJV before submission
+        const validationResult = validateFormData(data);
+        if (!validationResult.isValid) {
+            // Set validation errors
+            const validationErrorMessage = {
+                type: 'validation',
+                errors: validationResult.errors,
+                message: validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+                    ? '表單驗證失敗'
+                    : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                        ? '表单验证失败'
+                        : 'Form validation failed'
+            };
+            onSubmitError(validationErrorMessage);
+            return;
+        }
         if (onSubmit === undefined) {
             await defaultOnSubmit(defaultSubmitPromise(data));
             return;
         }
         await defaultOnSubmit(onSubmit(data));
     };
+    // Custom error renderer for validation errors with i18n support
+    const renderValidationErrors = (validationErrors) => {
+        const title = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+            ? `表單驗證失敗 (${validationErrors.length} 個錯誤${validationErrors.length > 1 ? '' : ''})`
+            : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                ? `表单验证失败 (${validationErrors.length} 个错误${validationErrors.length > 1 ? '' : ''})`
+                : `Form Validation Failed (${validationErrors.length} error${validationErrors.length > 1 ? 's' : ''})`;
+        const formLabel = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+            ? '表單'
+            : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                ? '表单'
+                : 'Form';
+        const currentValueLabel = validationLocale === 'zh-HK' || validationLocale === 'zh-TW'
+            ? '目前值:'
+            : validationLocale === 'zh-CN' || validationLocale === 'zh'
+                ? '当前值:'
+                : 'Current value:';
+        return (jsxs(Alert.Root, { status: "error", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxs(AccordionItem, { value: "validation-errors", children: [jsx(AccordionItemTrigger, { children: title }), jsx(AccordionItemContent, { children: jsx(Box, { mt: 2, children: validationErrors.map((err, index) => (jsxs(Box, { mb: 2, p: 2, bg: "red.50", borderLeft: "4px solid", borderColor: "red.500", children: [jsxs(Text, { fontWeight: "bold", color: "red.700", children: [err.field === 'root' ? formLabel : err.field, ":"] }), jsx(Text, { color: "red.600", children: err.message }), err.value !== undefined && (jsxs(Text, { fontSize: "sm", color: "red.500", mt: 1, children: [currentValueLabel, " ", JSON.stringify(err.value)] }))] }, index))) }) })] }) }) })] }));
+    };
     const renderColumns = ({ order, keys, ignore, include, }) => {
         const included = include.length > 0 ? include : keys;
         const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
@@ -5542,7 +5798,7 @@ const FormBody = () => {
                                 setIsConfirming(false);
                             }, variant: "subtle", children: translate.t("cancel") }), jsx(Button$1, { onClick: () => {
                                 onFormSubmit(validatedData);
-                            }, children: translate.t("confirm") })] }), isSubmiting && (jsx(Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsx(Center, { h: "full", children: jsx(Spinner, { color: "teal.500" }) }) })), isError && (jsx(Fragment, { children: jsx(Alert.Root, { status: "error", children: jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
+                            }, children: translate.t("confirm") })] }), isSubmiting && (jsx(Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsx(Center, { h: "full", children: jsx(Spinner, { color: "teal.500" }) }) })), isError && (jsx(Fragment, { children: customErrorRenderer ? (customErrorRenderer(error)) : (jsx(Fragment, { children: error?.type === 'validation' && error?.errors ? (renderValidationErrors(error.errors)) : (jsx(Alert.Root, { status: "error", children: jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) })) })) }))] }));
     }
     return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: ordered.map((column) => {
                     return (jsx(ColumnRenderer
@@ -5552,7 +5808,7 @@ const FormBody = () => {
                         properties: properties, prefix: ``, column }, `form-input-${column}`));
                 }) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [jsx(Button$1, { onClick: () => {
                             methods.reset();
-                        }, variant: "subtle", children: translate.t("reset") }), jsx(SubmitButton, {})] })] }));
+                        }, variant: "subtle", children: translate.t("reset") }), jsx(SubmitButton, {})] }), isError && error?.type === 'validation' && (jsx(Box, { mt: 4, children: error?.errors && renderValidationErrors(error.errors) }))] }));
 };
 
 const FormTitle = () => {
@@ -5594,4 +5850,4 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, createSchemaValidator, getColumns, getMultiDates, getRangeDates, getSupportedLocales, idPickerSanityCheck, isLocaleSupported, useDataTable, useDataTableContext, useDataTableServer, useForm, validateData, widthSanityCheck };

package/dist/types/components/Form/SchemaFormContext.d.ts

@@ -1,8 +1,9 @@
 import { AxiosRequestConfig } from "axios";
 import { JSONSchema7 } from "json-schema";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 import { FieldValues } from "react-hook-form";
 import { UseTranslationResponse } from "react-i18next";
+import { SupportedLocale } from "./utils/validation";
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
@@ -29,5 +30,7 @@ export interface SchemaFormContext<TData extends FieldValues> {
     error: unknown;
     setError: Dispatch<SetStateAction<unknown>>;
     getUpdatedData: () => TData | Promise<TData>;
+    customErrorRenderer?: (error: unknown) => ReactNode;
+    validationLocale?: SupportedLocale;
 }
 export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;

package/dist/types/components/Form/components/core/FormRoot.d.ts

@@ -1,4 +1,5 @@
 import { ForeignKeyProps } from "@/components/Form/components/fields/StringInputField";
+import { SupportedLocale } from "@/components/Form/utils/validation";
 import { AxiosRequestConfig } from "axios";
 import { JSONSchema7 } from "json-schema";
 import { Dispatch, ReactNode, SetStateAction } from "react";
@@ -21,6 +22,8 @@ export interface FormRootProps<TData extends FieldValues> {
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
+    customErrorRenderer?: (error: unknown) => ReactNode;
+    validationLocale?: SupportedLocale;
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -37,4 +40,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, validationLocale, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/utils/validation.d.ts

@@ -0,0 +1,49 @@
+import { JSONSchema7 } from "json-schema";
+declare const localize: {
+    en: () => void;
+    'zh-HK': import("ajv-i18n/localize/types").Localize;
+    'zh-TW': import("ajv-i18n/localize/types").Localize;
+    'zh-CN': import("ajv-i18n/localize/types").Localize;
+    zh: import("ajv-i18n/localize/types").Localize;
+};
+export type SupportedLocale = keyof typeof localize;
+export interface ValidationError {
+    field: string;
+    message: string;
+    value?: unknown;
+    schemaPath?: string;
+}
+export interface ValidationResult {
+    isValid: boolean;
+    errors: ValidationError[];
+}
+export interface ValidationOptions {
+    locale?: SupportedLocale;
+}
+/**
+ * Validates data against a JSON Schema using AJV with i18n support
+ * @param data - The data to validate
+ * @param schema - The JSON Schema to validate against
+ * @param options - Validation options including locale
+ * @returns ValidationResult containing validation status and errors
+ */
+export declare const validateData: (data: unknown, schema: JSONSchema7, options?: ValidationOptions) => ValidationResult;
+/**
+ * Creates a reusable validator function for a specific schema with i18n support
+ * @param schema - The JSON Schema to create validator for
+ * @param locale - The locale to use for error messages
+ * @returns A function that validates data against the schema
+ */
+export declare const createSchemaValidator: (schema: JSONSchema7, locale?: SupportedLocale) => (data: unknown) => ValidationResult;
+/**
+ * Get available locales for validation error messages
+ * @returns Array of supported locale codes
+ */
+export declare const getSupportedLocales: () => SupportedLocale[];
+/**
+ * Check if a locale is supported
+ * @param locale - The locale to check
+ * @returns Boolean indicating if the locale is supported
+ */
+export declare const isLocaleSupported: (locale: string) => locale is "en" | "zh-HK" | "zh-TW" | "zh-CN" | "zh";
+export {};

package/dist/types/index.d.ts

@@ -121,3 +121,5 @@ export * from "./components/DatePicker/getMultiDates";
 export * from "./components/DatePicker/getRangeDates";
 export * from "./components/DatePicker/RangeDatePicker";
 export * from "./components/DataTable/display/RecordDisplay";
+export * from "./components/Form/utils/validation";
+export type { SupportedLocale, ValidationOptions } from "./components/Form/utils/validation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.55",
+  "version": "12.0.0-beta.57",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -43,6 +43,9 @@
     "@tanstack/react-query": "^5.66.9",
     "@tanstack/react-table": "^8.21.2",
     "@uidotdev/usehooks": "^2.4.1",
+    "ajv": "^8.12.0",
+    "ajv-formats": "^3.0.1",
+    "ajv-i18n": "^4.2.0",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "next-themes": "^0.4.4",
@@ -70,6 +73,9 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "ajv": "^8.12.0",
+    "ajv-formats": "^3.0.1",
+    "ajv-i18n": "^4.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",