TCA-451 - validate url fields on 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,8 +46,16 @@ 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 {
+          [FORM_ERROR]: hasMissingRequiredFields,
+        }
+      }}
     >
       {({ handleSubmit, pristine, error }) => (
+        console.log(error),
         <form
           id={`dynamic-${id}`}
           onSubmit={handleSubmit as (e: FormEvent) => void}

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);