From 9be6acde7d685dc81c5ece77e167f8ada223ca08 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Thu, 8 Aug 2024 15:53:21 -0400
Subject: [PATCH] require name to submit style preset

---
 .../features/stylePresets/components/StylePresetForm.tsx | 9 ++++++---
 .../features/stylePresets/components/StylePresetMenu.tsx | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
index 82721d3a6a..a64899a9d6 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
@@ -26,13 +26,14 @@ export const StylePresetForm = ({ updatingStylePresetId }: { updatingStylePreset
 
   const defaultValues = useAppSelector((s) => s.stylePresetModal.prefilledFormData);
 
-  const { handleSubmit, control, register } = useForm<StylePresetFormData>({
+  const { handleSubmit, control, register, formState } = useForm<StylePresetFormData>({
     defaultValues: defaultValues || {
       name: '',
       positivePrompt: '',
       negativePrompt: '',
       image: null,
     },
+    mode: 'onChange',
   });
 
   const handleClickSave = useCallback<SubmitHandler<StylePresetFormData>>(
@@ -72,7 +73,7 @@ export const StylePresetForm = ({ updatingStylePresetId }: { updatingStylePreset
         <StylePresetImageField control={control} name="image" />
         <FormControl orientation="vertical">
           <FormLabel>{t('stylePresets.name')}</FormLabel>
-          <Input size="md" {...register('name')} />
+          <Input size="md" {...register('name', { required: true, minLength: 1 })} required={true} />
         </FormControl>
       </Flex>
 
@@ -81,7 +82,9 @@ export const StylePresetForm = ({ updatingStylePresetId }: { updatingStylePreset
       <Text variant="subtext">{t('stylePresets.placeholderDirections')}</Text>
 
       <Flex justifyContent="flex-end">
-        <Button onClick={handleSubmit(handleClickSave)}>{t('common.save')}</Button>
+        <Button onClick={handleSubmit(handleClickSave)} isDisabled={!formState.isValid}>
+          {t('common.save')}
+        </Button>
       </Flex>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenu.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenu.tsx
index e314295b26..1159261019 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenu.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenu.tsx
@@ -69,7 +69,7 @@ export const StylePresetMenu = () => {
 
       {data.presets.length === 0 && data.defaultPresets.length === 0 && (
         <Text m="20px" textAlign="center">
-          {t('stylePrests.noMatchingTemplates')}
+          {t('stylePresets.noMatchingTemplates')}
         </Text>
       )}