validate video title length on client side

Author: BetrixDev

app/components/dialogs/edit-video-dialog.tsx

@@ -127,8 +127,12 @@ export function EditVideoDialog() {
           <form.Field
             name="title"
             validators={{
-              onChange: ({ value }) =>
-                !value ? "A video title is required" : undefined,
+              onChange: ({ value }) => {
+                if (!value) return "A video title is required";
+                if (value.length > 100)
+                  return "Title must be 100 characters or less";
+                return undefined;
+              },
             }}
             children={(field) => {
               return (
@@ -178,10 +182,7 @@ export function EditVideoDialog() {
             </Button>
             <Button
               className="grow basis-1/2 bg-blue-600 text-white"
-              type="button"
-              onMouseDown={() => {
-                form.handleSubmit();
-              }}
+              type="submit"
             >
               Save Changes
             </Button>

app/components/dialogs/upload-video-dialog.tsx

@@ -80,7 +80,7 @@ function UploadVideoDialogChild() {
       title.length--;
     }
 
-    return title.join(".");
+    return title.join(".").substring(0, 99);
   }, []);
 
   const form = useForm<FormData>({
@@ -150,6 +150,13 @@ function UploadVideoDialogChild() {
         >
           <form.Field
             name="title"
+            validators={{
+              onSubmit: ({ value }) => {
+                if (value && value.length > 100)
+                  return "Title must be 100 characters or less";
+                return undefined;
+              },
+            }}
             children={(field) => {
               return (
                 <div>
@@ -163,6 +170,7 @@ function UploadVideoDialogChild() {
                     placeholder="Enter video title (leave blank to use file name)"
                     className="dark:bg-gray-800 border-gray-700 mt-1"
                   />
+                  <FieldInfo field={field} />
                 </div>
               );
             }}