added validation methods

components/newappeal/buildsection.js

@@ -1,10 +1,11 @@
 import Link from "next/link";
+import _, { has } from "lodash";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { useState, useEffect } from "react";
 import xpath from "xpath";
 import BuildRow from "./buildrow";
-import { reduxForm, formValueSelector } from "redux-form";
+import { reduxForm, formValueSelector, getFormSubmitErrors } from "redux-form";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import {
     setCaseReference,
@@ -56,12 +57,73 @@ let BuildSection = (props) => {
 
     const onHandleSubmit = (values) => {
         setCurrentSection(currentSection + 1);
-        setCaseReference(router.query.refno);
     };
 
-    // const initialValues = {
-    //     email: router.query.refno,
-    // };
+    const [hasErrors, setHasErrors] = useState("");
+
+    const getErrors = () => {
+        let errorsobj = props.props.form["appealForm"];
+        setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
+        window.scrollTo(0, 0);
+    };
+
+    let errorsobj = {};
+    const ShowErrorHeader = (props) => {
+        errorsobj = props.props.appealForm.syncErrors;
+        errorsobj = _.keys(errorsobj);
+
+        const getErrorLabel = (whichField) => {
+            var doc = parser.parseFromString(props.formXML, "text/xml");
+            var errorFieldLabel = xpath.select(
+                "//*[control/@id='" + whichField + "']//@description",
+                doc
+            );
+
+            return errorFieldLabel[0].value;
+        };
+
+        const ShowErrors = () => {
+            let errorList = [];
+            for (let i = 0; i < errorsobj.length; ++i) {
+                //get label from error key - search rowxml for id = errorobj
+
+                errorList.push(
+                    <li>
+                        <a href={"#" + errorsobj[i] + "_label"}>
+                            {" "}
+                            {getErrorLabel(errorsobj[i])}
+                        </a>
+                    </li>
+                );
+            }
+
+            return errorList;
+        };
+
+        return !_.isEmpty(errorsobj) ? (
+            <div
+                className="govuk-error-summary"
+                aria-labelledby="error-summary-title"
+                role="alert"
+                tabIndex="-1"
+                data-module="govuk-error-summary"
+            >
+                <h2
+                    className="govuk-error-summary__title"
+                    id="error-summary-title"
+                >
+                    The following fields have a problem :
+                </h2>
+                <div className="govuk-error-summary__body">
+                    <ul className="govuk-list govuk-error-summary__list">
+                        <ShowErrors />
+                    </ul>
+                </div>
+            </div>
+        ) : (
+            ""
+        );
+    };
 
     return (
         <div className="govuk-grid-row">
@@ -70,6 +132,16 @@ let BuildSection = (props) => {
                     {titles[0].value}{" "}
                 </h1>
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    {hasErrors == true ? (
+                        <ShowErrorHeader
+                            hasErrors={hasErrors}
+                            props={props.props.form}
+                            formXML={formXML}
+                        />
+                    ) : (
+                        ""
+                    )}
+
                     <BuildRow
                         rowXML={rowXML}
                         whichSection={props.whichSection}
@@ -84,6 +156,7 @@ let BuildSection = (props) => {
                                 type="submit"
                                 className="govuk-button"
                                 data-module="govuk-button"
+                                onClick={() => getErrors()}
                             >
                                 Continue
                             </button>