Merge pull request #75 from topcoder-platform/TCA-451_update-form-layout-for-backend-project

Tca 451 update form layout for backend project

Author: vas3a

client/src/components/formHelpers/form-fields.tsx

@@ -86,7 +86,12 @@ function FormFields(props: FormFieldsProps): JSX.Element {
               return (
                 <FormGroup key={key} className='embedded'>
                   {type === 'hidden' ? null : (
-                    <ControlLabel htmlFor={key}>{label}</ControlLabel>
+                    <ControlLabel htmlFor={key}>
+                      {label}
+                      {required.includes(name) && (
+                        <span className='required-star'>*</span>
+                      )}
+                    </ControlLabel>
                   )}
                   <FormControl
                     componentClass={type === 'textarea' ? type : 'input'}

client/src/components/formHelpers/form.tsx

@@ -1,3 +1,4 @@
+import { FORM_ERROR } from 'final-form';
 import React, { FormEvent } from 'react';
 import { Form } from 'react-final-form';
 
@@ -45,6 +46,17 @@ function DynamicForm({
       onSubmit={(values: URLValues, ...args: unknown[]) => {
         submit(formatUrlValues(values, options), ...args);
       }}
+      validate={(values: URLValues) => {
+        const hasMissingRequiredFields = options.required?.some(
+          (field: string) => !values[field]
+        );
+
+        return hasMissingRequiredFields
+          ? {
+              [FORM_ERROR]: hasMissingRequiredFields
+            }
+          : undefined;
+      }}
     >
       {({ handleSubmit, pristine, error }) => (
         <form

client/src/components/layouts/global.css

@@ -500,6 +500,10 @@ fieldset[disabled] .btn-primary.focus {
 strong {
   color: var(--secondary-color);
 }
+.required-star {
+  color: red;
+  margin-left: 3px;
+}
 
 .form-group.embedded {
   border: 1px solid var(--tc-black-40);