e-mail and phone validation in group-subheader component

src/Components/Input/TextInput.tsx

@@ -13,6 +13,8 @@ type InputTextProps = {
   defaultValue?: string
   placeholder?: string
   autocomplete?: string
+  pattern?: string
+  required?: boolean
   updateFormValue?: (value: string) => void
 }
 
@@ -26,6 +28,8 @@ export function TextInput({
   defaultValue,
   placeholder,
   autocomplete,
+  pattern,
+  required = true,
   updateFormValue,
 }: InputTextProps) {
   const [inputValue, setInputValue] = useState<string>(defaultValue || '')
@@ -50,7 +54,8 @@ export function TextInput({
         </label>
       ) : null}
       <input
-        required
+        required={required}
+        pattern={pattern}
         type={type || 'text'}
         name={dataField}
         value={inputValue}

src/Components/Profile/ProfileForm.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
@@ -148,58 +147,63 @@ export function ProfileForm() {
         backdrop
         className='tw-mx-4 tw-mt-4 tw-mb-4 tw-overflow-x-hidden tw-w-[calc(100%-32px)]  md:tw-w-[calc(50%-32px)] tw-max-w-3xl !tw-left-auto tw-top-0 tw-bottom-0'
       >
-        <div className='tw-flex tw-flex-col tw-h-full'>
-          <FormHeader item={item} state={state} setState={setState} />
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            void onUpdateItem(
+              state,
+              item,
+              tags,
+              addTag,
+              setLoading,
+              navigate,
+              updateItem,
+              addItem,
+              user,
+              urlParams,
+            )
+          }}
+        >
+          <div className='tw-flex tw-flex-col tw-h-full'>
+            <FormHeader item={item} state={state} setState={setState} />
 
-          {template === 'onepager' && (
-            <OnepagerForm item={item} state={state} setState={setState}></OnepagerForm>
-          )}
+            {template === 'onepager' && (
+              <OnepagerForm item={item} state={state} setState={setState}></OnepagerForm>
+            )}
 
-          {template === 'simple' && <SimpleForm state={state} setState={setState}></SimpleForm>}
+            {template === 'simple' && <SimpleForm state={state} setState={setState}></SimpleForm>}
 
-          {template === 'flex' && (
-            <FlexForm item={item} state={state} setState={setState}></FlexForm>
-          )}
+            {template === 'flex' && (
+              <FlexForm item={item} state={state} setState={setState}></FlexForm>
+            )}
 
-          {template === 'tabs' && (
-            <TabsForm
-              loading={loading}
-              item={item}
-              state={state}
-              setState={setState}
-              updatePermission={updatePermission}
-              linkItem={(id) => linkItem(id, item, updateItem)}
-              unlinkItem={(id) => unlinkItem(id, item, updateItem)}
-              setUrlParams={setUrlParams}
-            ></TabsForm>
-          )}
+            {template === 'tabs' && (
+              <TabsForm
+                loading={loading}
+                item={item}
+                state={state}
+                setState={setState}
+                updatePermission={updatePermission}
+                linkItem={(id) => linkItem(id, item, updateItem)}
+                unlinkItem={(id) => unlinkItem(id, item, updateItem)}
+                setUrlParams={setUrlParams}
+              ></TabsForm>
+            )}
 
-          <div className='tw-mt-4'>
-            <button
-              className={loading ? ' tw-loading tw-btn tw-float-right' : 'tw-btn tw-float-right'}
-              onClick={() =>
-                onUpdateItem(
-                  state,
-                  item,
-                  tags,
-                  addTag,
-                  setLoading,
-                  navigate,
-                  updateItem,
-                  addItem,
-                  user,
-                  urlParams,
-                )
-              }
-              style={{
-                backgroundColor: `${item.layer?.itemColorField && getValue(item, item.layer?.itemColorField) ? getValue(item, item.layer?.itemColorField) : getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor}`,
-                color: '#fff',
-              }}
-            >
-              Update
-            </button>
+            <div className='tw-mt-4'>
+              <button
+                className={loading ? ' tw-loading tw-btn tw-float-right' : 'tw-btn tw-float-right'}
+                type='submit'
+                style={{
+                  backgroundColor: `${item.layer?.itemColorField && getValue(item, item.layer?.itemColorField) ? getValue(item, item.layer?.itemColorField) : getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor}`,
+                  color: '#fff',
+                }}
+              >
+                Update
+              </button>
+            </div>
           </div>
-        </div>
+        </form>
       </MapOverlayPage>
     </>
   )

src/Components/Profile/Subcomponents/ContactInfoForm.tsx

@@ -22,6 +22,7 @@ export const ContactInfoForm = ({
         <TextInput
           placeholder='Email'
           type='email'
+          required={false}
           defaultValue={state.contact}
           updateFormValue={(v) =>
             setState((prevState) => ({
@@ -41,6 +42,9 @@ export const ContactInfoForm = ({
         </label>
         <TextInput
           placeholder='Telefonnummer'
+          type='tel'
+          required={false}
+          pattern='^\+?[0-9\s\-]{7,15}$'
           defaultValue={state.telephone}
           updateFormValue={(v) =>
             setState((prevState) => ({

src/Components/Profile/Subcomponents/FormHeader.tsx

@@ -44,6 +44,7 @@ export const FormHeader = ({ item, state, setState }) => {
         />
         <TextInput
           placeholder='Subtitle'
+          required={false}
           defaultValue={item?.subname ? item.subname : ''}
           updateFormValue={(v) =>
             setState((prevState) => ({