updated validation on advanced search

components/search/advancedsearch.js

@@ -9,6 +9,14 @@ import data from "../../data/collections.json";
 import LoadingOverlay from "react-loading-overlay";
 import transLookup from "../../data/lookuptranslations.json";
 
+const required = (errorMsg) => (value) =>
+    value || typeof value === "number" ? undefined : errorMsg;
+
+export const minLength = (errorMsg) => (value) =>
+    value && value.length < 4
+        ? errorMsg //`Must be ${min} characters or more`
+        : undefined;
+
 let AdvancedSearch = (props) => {
     let { t } = useTranslation();
 
@@ -37,6 +45,53 @@ let AdvancedSearch = (props) => {
         ? [{}]
         : props.LPAData.LPAData.value;
 
+    const RenderTextfield = ({
+        id,
+        className,
+        rows,
+        datafieldname,
+        name,
+        label,
+        input,
+        hint1,
+        hint2,
+        hint3,
+        meta: { touched, error },
+        ...custom
+    }) => {
+        return (
+            <>
+                <div className="govuk-form-group">
+                    <div id="basicSearch-hint" className="govuk-hint ">
+                        <label className="govuk-label" htmlFor="caseRef">
+                            {t("search:casereference-label")}
+                        </label>
+                    </div>
+
+                    <div>
+                        <input
+                            {...input}
+                            className={className}
+                            name={name}
+                            id={id}
+                        />
+                        {touched && error && (
+                            <span
+                                id={id + "-error"}
+                                className="govuk-error-message govuk-form-group--error"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                {error}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    };
+
     const RenderLPAList = ({
         name,
         id,
@@ -216,8 +271,6 @@ let AdvancedSearch = (props) => {
         );
     };
 
-    const required = (value) => (value ? undefined : "Required");
-
     // const [showSpinnerState, setShowSpinnerState] = useState(false);
 
     // let spinnerState = () => {
@@ -275,27 +328,31 @@ let AdvancedSearch = (props) => {
                                                 {t("search:search-title-label")}
                                             </h1>
                                         </legend>
-                                        <div className="govuk-form-group">
-                                            <label
-                                                className="govuk-label"
-                                                htmlFor="caseRef"
-                                            >
-                                                {t(
-                                                    "search:casereference-label"
-                                                )}
-                                            </label>
 
-                                            <Field
-                                                name="caseRef"
-                                                id="caseRef"
-                                                component="input"
-                                                className="govuk-input govuk-!-width-two-thirds"
-                                                label={t(
-                                                    "search:casereference-label"
-                                                )}
-                                                errormsg="Appeal type is required"
-                                            />
-                                        </div>
+                                        <Field
+                                            validate={[
+                                                minLength(
+                                                    t(
+                                                        "myportal:searchcases-validation-minlength"
+                                                    )
+                                                ),
+                                            ]}
+                                            className="govuk-input govuk-!-width-two-thirds"
+                                            component={RenderTextfield}
+                                            id="caseRef"
+                                            name="caseRef"
+                                            type="text"
+                                            aria-describedby="caseRef-hint"
+                                            hint1={t(
+                                                "myportal:searchcases-card-search-hint"
+                                            )}
+                                            hint2={t(
+                                                "myportal:searchcases-card-search-example-label-1"
+                                            )}
+                                            hint3={t(
+                                                "myportal:searchcases-card-search-example-label-2"
+                                            )}
+                                        />
 
                                         <Field
                                             name="appealTypes"