Repository: provectus/kafka-ui
Issue: Error message about Value field requiredness is shown once the Custom Parameter added within Create a new Topic form
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
Once Custom Parameter added, error message for Value field is shown, will be good to display it after pressing but letting it empty (to work like Topic Name field)

**Set up**

https://www.kafka-ui.provectus.io/



**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Topics
2. Press Add a Topic
3. Click on 'Add Custom Parameter'

**Expected behavior**

- Error message for required fields should display after letting empty
- Required fields should have "*" asterisk symbol to be clear for user

**Screenshots**

<img width="1717" alt="required fileds" src="https://user-images.githubusercontent.com/104780608/170314790-617be184-480a-40bf-95de-05b9ceef96cf.png">


**Additional context**
_**Please make sure all the required fields have asterisk * symbol in a form**_

linked to https://github.com/provectus/kafka-ui/issues/1885 https://github.com/provectus/kafka-ui/issues/2030



Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/New/New.tsx b/kafka-ui-react-app/src/components/Topics/New/New.tsx
index 98e9aca0d99..cbb15f0141b 100644
--- a/kafka-ui-react-app/src/components/Topics/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Topics/New/New.tsx
@@ -24,7 +24,7 @@ enum Filters {
 
 const New: React.FC = () => {
   const methods = useForm<TopicFormData>({
-    mode: 'all',
+    mode: 'onChange',
     resolver: yupResolver(topicFormValidationSchema),
   });
 
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
index d56bd50d54e..72f28c5c461 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
@@ -59,7 +59,7 @@ const CustomParamField: React.FC<Props> = ({
       newExistingFields.push(nameValue);
       setExistingFields(newExistingFields);
       setValue(`customParams.${index}.value`, TOPIC_CUSTOM_PARAMS[nameValue], {
-        shouldValidate: true,
+        shouldValidate: !!TOPIC_CUSTOM_PARAMS[nameValue],
       });
     }
   }, [existingFields, index, nameValue, setExistingFields, setValue]);
@@ -92,7 +92,7 @@ const CustomParamField: React.FC<Props> = ({
         </FormError>
       </div>
       <div>
-        <InputLabel>Value</InputLabel>
+        <InputLabel>Value *</InputLabel>
         <Input
           name={`customParams.${index}.value` as const}
           hookFormOptions={{
diff --git a/kafka-ui-react-app/src/lib/yupExtended.ts b/kafka-ui-react-app/src/lib/yupExtended.ts
index c8af702f0f3..f93b15de442 100644
--- a/kafka-ui-react-app/src/lib/yupExtended.ts
+++ b/kafka-ui-react-app/src/lib/yupExtended.ts
@@ -61,7 +61,7 @@ export const topicFormValidationSchema = yup.object().shape({
   maxMessageBytes: yup.number().min(1).required(),
   customParams: yup.array().of(
     yup.object().shape({
-      name: yup.string().required(),
+      name: yup.string().required('Custom parameter is required'),
       value: yup.string().required('Value is required'),
     })
   ),


Test patch: