fix: avoid empty field validatation (#1019)

avoid empty field validations

Author: sagardspeed2

.changeset/heavy-coins-greet.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+Fix: avoid empty field to validate

packages/runtime/src/widgets/Form/TextInput.tsx

@@ -196,7 +196,7 @@ export const TextInput: React.FC<TextInputProps> = (props) => {
     if (regex) {
       rulesArray.push({
         validator: (_, inputValue?: string) => {
-          if (new RegExp(regex).test(inputValue || "")) {
+          if (!inputValue || new RegExp(regex).test(inputValue || "")) {
             return Promise.resolve();
           }
           return Promise.reject(

packages/runtime/src/widgets/Form/__tests__/Form.test.tsx

@@ -290,5 +290,63 @@ describe("Form", () => {
       expect(screen.getByText("Please enter a value")).toBeInTheDocument();
     });
   });
+
+  test("validate only if field is not empty", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "TextInput",
+            properties: {
+              label: "Regex test",
+              validator: {
+                regex: /^\d{5}$/,
+                regexError: "Please enter a valid 5-digit zip code",
+              },
+            },
+          },
+          {
+            name: "Button",
+            properties: {
+              label: "Submit",
+              submitForm: true,
+            },
+          },
+        ]}
+        id="form"
+      />,
+      {
+        wrapper: FormTestWrapper,
+      },
+    );
+
+    const validateBtn = screen.getByText("Submit");
+    fireEvent.click(validateBtn);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText("Please enter a valid 5-digit zip code"),
+      ).not.toBeInTheDocument();
+    });
+
+    const input = screen.getByLabelText("Regex test");
+    fireEvent.change(input, { target: { value: "12" } });
+    fireEvent.click(validateBtn);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText("Please enter a valid 5-digit zip code"),
+      ).toBeInTheDocument();
+    });
+
+    fireEvent.change(input, { target: { value: "" } });
+    fireEvent.click(validateBtn);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText("Please enter a valid 5-digit zip code"),
+      ).not.toBeInTheDocument();
+    });
+  });
 });
 /* eslint-enable react/no-children-prop */