added validation methods

components/homepage/casesearch.js

@@ -9,17 +9,24 @@ export default function CaseSearch() {
     const router = useRouter();
     const { locale } = router;
     const [query, setQuery] = useState("");
+    const [validationError, setValidationError] = useState("");
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
     const basicSearch = (event) => {
         event.preventDefault();
-        console.log(query);
-        // /searchresults
 
-        router.push({
-            pathname: "/searchresults",
-            query: { q: query },
-        });
+        if (query == "" || query == null) {
+            setValidationError(true);
+        } else {
+            setValidationError(false);
+            console.log(query);
+            // /searchresults
+
+            router.push({
+                pathname: "/searchresults",
+                query: { q: query },
+            });
+        }
     };
 
     return (
@@ -29,8 +36,14 @@ export default function CaseSearch() {
                     <h3 className="heading-small card-heading">
                         {t("home:casesearch-card-title")}
                     </h3>
-                    <div className="govuk-form-group">
-                        <div id="event-name-hint" className="govuk-hint ">
+                    <div
+                        className={
+                            validationError
+                                ? "govuk-form-group govuk-form-group--error"
+                                : "govuk-form-group "
+                        }
+                    >
+                        <div id="basicSearch-hint" className="govuk-hint ">
                             {t("home:casesearch-card-search-hint")}:
                             <br />
                             <span className="govuk-body-s">
@@ -41,15 +54,26 @@ export default function CaseSearch() {
                                     )}
                                     :
                                 </span>{" "}
-                                APP/A1234/A/99/1234567
+                                CAS-00009-W8N6W4
                             </span>
                         </div>
+                        {validationError && (
+                            <span
+                                id="basicSearch-error"
+                                className="govuk-error-message"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                Case reference is required
+                            </span>
+                        )}
                         <input
                             className="govuk-input"
-                            id="event-name"
-                            name="event-name"
+                            id="basicSearch"
+                            name="basicSearch"
                             type="text"
-                            aria-describedby="event-name-hint"
+                            aria-describedby="basicSearch-hint"
                             onChange={handleParam(setQuery)}
                         />
                     </div>