🚸 Add basic form validation rules

systemli · Apr 28, 2024 · 090d30a · 090d30a
1 parent 9c7cf90
commit 090d30a
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 8 deletions.
diff --git a/src/components/ticker/form/Description.tsx b/src/components/ticker/form/Description.tsx
@@ -9,7 +9,21 @@ const Description: FC = () => {
     <Controller
       name="description"
       control={control}
-      render={({ field }) => <TextField {...field} margin="dense" maxRows={10} multiline label="Description" required />}
+      rules={{
+        required: 'Description is required',
+      }}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
+          margin="dense"
+          maxRows={10}
+          multiline
+          label="Description"
+          required
+        />
+      )}
     />
   )
 }

diff --git a/src/components/ticker/form/Domain.tsx b/src/components/ticker/form/Domain.tsx
@@ -11,7 +11,20 @@ const Domain: FC = () => {
     <Controller
       name="domain"
       control={control}
-      render={({ field }) => <TextField {...field} label="Domain" margin="dense" required disabled={!user?.roles.includes('admin')} />}
+      rules={{
+        required: 'Domain is required',
+      }}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          label="Domain"
+          margin="dense"
+          error={!!error}
+          helperText={error?.message ? error.message : null}
+          required
+          disabled={!user?.roles.includes('admin')}
+        />
+      )}
     />
   )
 }

diff --git a/src/components/ticker/form/Email.tsx b/src/components/ticker/form/Email.tsx
@@ -11,7 +11,14 @@ const Email: FC = () => {
     <Controller
       name="information.email"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+          message: 'E-Mail is invalid',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -21,6 +28,8 @@ const Email: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="E-Mail"
           margin="dense"
         />

diff --git a/src/components/ticker/form/Facebook.tsx b/src/components/ticker/form/Facebook.tsx
@@ -11,7 +11,14 @@ const Facebook: FC = () => {
     <Controller
       name="information.facebook"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^([a-zA-Z0-9._]+)$/,
+          message: 'Invalid Facebook username',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -22,6 +29,8 @@ const Facebook: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Facebook"
           margin="dense"
         />

diff --git a/src/components/ticker/form/Telegram.tsx b/src/components/ticker/form/Telegram.tsx
@@ -11,7 +11,14 @@ const Telegram: FC = () => {
     <Controller
       name="information.telegram"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^\w{5,32}$/,
+          message: 'Invalid Telegram username',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -22,6 +29,8 @@ const Telegram: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Telegram"
           margin="dense"
         />

diff --git a/src/components/ticker/form/Title.tsx b/src/components/ticker/form/Title.tsx
@@ -5,7 +5,20 @@ import { Controller, useFormContext } from 'react-hook-form'
 const Title: FC = () => {
   const { control } = useFormContext()
 
-  return <Controller name="title" control={control} render={({ field }) => <TextField {...field} label="Title" margin="dense" required />} />
+  return (
+    <Controller
+      name="title"
+      control={control}
+      rules={{
+        required: 'Title is required',
+        minLength: { value: 3, message: 'Title is too short' },
+        maxLength: { value: 255, message: 'Title is too long' },
+      }}
+      render={({ field, fieldState: { error } }) => (
+        <TextField {...field} error={!!error} helperText={error?.message ? error.message : null} label="Title" margin="dense" required />
+      )}
+    />
+  )
 }
 
 export default Title
diff --git a/src/components/ticker/form/Twitter.tsx b/src/components/ticker/form/Twitter.tsx
@@ -11,7 +11,14 @@ const Twitter: FC = () => {
     <Controller
       name="information.twitter"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^([a-zA-Z0-9._]+)$/,
+          message: 'Invalid Twitter username',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -22,6 +29,8 @@ const Twitter: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Twitter"
           margin="dense"
         />

diff --git a/src/components/ticker/form/Url.tsx b/src/components/ticker/form/Url.tsx
@@ -11,7 +11,14 @@ const Url: FC = () => {
     <Controller
       name="information.url"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^(https?:\/\/)?([a-z0-9-]+\.)+[a-z]{2,}(:\d{1,5})?(\/.*)?$/i,
+          message: 'Homepage is invalid',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -21,6 +28,8 @@ const Url: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Homepage"
           margin="dense"
         />