validation regex

www/src/components/fields/ShortText/Settings.tsx

@@ -19,6 +19,17 @@ export default function Settings({ handleChange, config }) {
           else handleChange("maxLength")(e.target.value);
         }}
       />
+      <Subheading>Validation Regex</Subheading>
+      <TextField
+        type="text"
+        value={config.maxLength}
+        label={"Validation Regex"}
+        fullWidth
+        onChange={(e) => {
+          if (e.target.value === "") handleChange("validationRegex")(null);
+          else handleChange("validationRegex")(e.target.value);
+        }}
+      />
     </>
   );
 }

www/src/components/fields/_withTableCell/withBasicCell.tsx

@@ -17,16 +17,20 @@ export default function withBasicCell(
   return function BasicCell(props: FormatterProps<any>) {
     const { name, key } = props.column;
     const value = getCellValue(props.row, key);
-    const isMissing =
-      props.row._ft_missingRequiredFields?.includes(key) && value === undefined;
+    const { validationRegex, required } = (props.column as any).config;
+    const invalidInput =
+      validationRegex && !new RegExp(validationRegex).test(value);
+    const isMissing = required && value === undefined;
     if (isMissing) return <>missing!</>;
     return (
       <ErrorBoundary fullScreen={false} basic wrap="nowrap">
-        <BasicCellComponent
-          value={value}
-          name={name}
-          type={(props.column as any).type as FieldType}
-        />
+        <span style={invalidInput ? { color: "#f00" } : {}}>
+          <BasicCellComponent
+            value={value}
+            name={name}
+            type={(props.column as any).type as FieldType}
+          />
+        </span>
       </ErrorBoundary>
     );
   };