validation on date field in sub field for owner and tenant

components/elements/index.js

@@ -656,7 +656,9 @@ const RenderDatePicker = ({
                             </div>
                         )}
                     </legend>
-                    {touched && error && (
+                    {!custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
                               <span
                                   id={id + "-error"}
                                   className="govuk-error-message"
@@ -666,7 +668,8 @@ const RenderDatePicker = ({
                                   </span>{" "}
                                   {errorMsg}
                               </span>
-                    )}
+                          )
+                        : ""}
 
                     {/* {value}
                     <br />
@@ -693,6 +696,20 @@ const RenderDatePicker = ({
                         autoComplete="off"
                         //value={!value ? null : moment(value, "DD/MM/yyyy")}
                     />
+                    {custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
+                              <span
+                                  id={id + "-error"}
+                                  className="govuk-error-message"
+                              >
+                                  <span className="govuk-visually-hidden">
+                                      Error:
+                                  </span>{" "}
+                                  {error}
+                              </span>
+                          )
+                        : ""}
                 </fieldset>
             </div>
         </>
@@ -2214,15 +2231,15 @@ const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
 
         return errors;
     };
+    const required = (value) =>
+        value ? undefined : t("newappeal:is-required-label");
 
     return (
-        <ul>
+        <ul className="subFieldList">
-            <div>
             {fields.map((member, index) => (
                 <div key={index}>
                     <h4>
-                            {subTitle == "owners" ? "Owner" : "Tenant"} #
+                        {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
-                            {index + 1}
                     </h4>
 
                     <div className="fieldArrayContainer">
@@ -2247,7 +2264,9 @@ const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
                             label="Date served "
                             dateStart={"-6m"}
                             dateEnd={"0"}
+                            validate={[required]}
                             className="govuk-input govuk-input--width-10"
+                            showErrorBottom={true}
                         />
 
                         <button
@@ -2261,7 +2280,7 @@ const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
                     </div>
                 </div>
             ))}
-            </div>
+
             <br />
             {fields.length < custom.maxSubField && (
                 <button