fix(web): show url validation error for each value on multiple field

web/src/components/molecules/Content/Form/fields/FieldComponents/URLField.tsx

@@ -1,12 +1,13 @@
+import { useMemo, useState } from "react";
+
 import Form from "@reearth-cms/components/atoms/Form";
 import Input from "@reearth-cms/components/atoms/Input";
 import MultiValueField from "@reearth-cms/components/molecules/Common/MultiValueField";
 import { Field } from "@reearth-cms/components/molecules/Schema/types";
 import { useT } from "@reearth-cms/i18n";
-import { validateURL } from "@reearth-cms/utils/regex";
 
 import FieldTitle from "../../FieldTitle";
-import { requiredValidator } from "../utils";
+import { requiredValidator, urlErrorIndexesGet } from "../utils";
 
 type URLFieldProps = {
   field: Field;
@@ -18,47 +19,47 @@ type URLFieldProps = {
 const URLField: React.FC<URLFieldProps> = ({ field, itemGroupId, onMetaUpdate, disabled }) => {
   const t = useT();
 
+  const required = useMemo(() => field.required, [field.required]);
+  const [errorIndexes, setErrorIndexes] = useState(new Set<number>());
+
   return (
     <Form.Item
       extra={field.description}
+      validateStatus="success"
       name={itemGroupId ? [field.id, itemGroupId] : field.id}
       label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />}
       rules={[
         {
-          required: field.required,
+          required,
           validator: requiredValidator,
           message: t("Please input field!"),
         },
         {
           message: t("URL is not valid"),
           validator: async (_, value) => {
-            if (value) {
-              if (
-                Array.isArray(value) &&
-                value.some((valueItem: string) => !validateURL(valueItem) && valueItem.length > 0)
-              )
-                return Promise.reject();
-              else if (!Array.isArray(value) && !validateURL(value) && value?.length > 0)
-                return Promise.reject();
+            const indexes = urlErrorIndexesGet(value);
+            setErrorIndexes(new Set(indexes));
+            if (indexes.length) {
+              return Promise.reject();
             }
             return Promise.resolve();
           },
         },
       ]}>
       {field.multiple ? (
         <MultiValueField
-          showCount={true}
-          maxLength={field.typeProperty?.maxLength ?? 500}
           FieldInput={Input}
           onBlur={onMetaUpdate}
           disabled={disabled}
+          required={required}
+          errorIndexes={errorIndexes}
         />
       ) : (
         <Input
-          showCount={true}
-          maxLength={field.typeProperty?.maxLength ?? 500}
           onBlur={onMetaUpdate}
           disabled={disabled}
+          required={required}
+          isError={errorIndexes.has(0)}
         />
       )}
     </Form.Item>

web/src/components/molecules/Content/Form/fields/utils.ts

@@ -1,4 +1,5 @@
 import { RuleObject } from "@reearth-cms/components/atoms/Form";
+import { validateURL } from "@reearth-cms/utils/regex";
 
 export const checkIfEmpty = (value: unknown) =>
   value === undefined || value === null || value === "";
@@ -12,3 +13,15 @@ export const requiredValidator = (rule: RuleObject, value: unknown) => {
   }
   return Promise.resolve();
 };
+
+export const urlErrorIndexesGet = (value: string | string[]) => {
+  const indexes: number[] = [];
+  if (Array.isArray(value)) {
+    value.forEach((v: string, index: number) => {
+      if (v && !validateURL(v)) indexes.push(index);
+    });
+  } else if (value && !validateURL(value)) {
+    indexes.push(0);
+  }
+  return indexes;
+};

web/src/components/molecules/Schema/FieldModal/FieldDefaultInputs/URLField/index.tsx

@@ -1,40 +1,43 @@
-import React from "react";
+import { useState } from "react";
 
 import Form from "@reearth-cms/components/atoms/Form";
 import Input from "@reearth-cms/components/atoms/Input";
 import MultiValueField from "@reearth-cms/components/molecules/Common/MultiValueField";
+import { urlErrorIndexesGet } from "@reearth-cms/components/molecules/Content/Form/fields/utils";
 import { useT } from "@reearth-cms/i18n";
-import { validateURL } from "@reearth-cms/utils/regex";
 
 type Props = {
   multiple: boolean;
 };
 
 const URLField: React.FC<Props> = ({ multiple }) => {
   const t = useT();
+  const [errorIndexes, setErrorIndexes] = useState(new Set<number>());
+
   return (
     <Form.Item
       name="defaultValue"
+      validateStatus="success"
       label={t("Set default value")}
       extra={t("Default value must be a valid URL and start with 'http://' or 'https://'.")}
       rules={[
         {
-          message: "URL is not valid",
+          message: t("URL is not valid"),
           validator: async (_, value) => {
-            if (value) {
-              if (
-                multiple &&
-                value.some((valueItem: string) => !validateURL(valueItem) && valueItem.length > 0)
-              )
-                return Promise.reject();
-              else if (!multiple && !validateURL(value) && value?.length > 0)
-                return Promise.reject();
+            const indexes = urlErrorIndexesGet(value);
+            setErrorIndexes(new Set(indexes));
+            if (indexes.length) {
+              return Promise.reject();
             }
             return Promise.resolve();
           },
         },
       ]}>
-      {multiple ? <MultiValueField FieldInput={Input} /> : <Input />}
+      {multiple ? (
+        <MultiValueField FieldInput={Input} errorIndexes={errorIndexes} />
+      ) : (
+        <Input isError={errorIndexes.has(0)} />
+      )}
     </Form.Item>
   );
 };