validate required on submit not blur

components/myportal/searchcases.js

@@ -2,7 +2,7 @@ import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
-import { Field, reduxForm } from "redux-form";
+import { Field, reduxForm, SubmissionError } from "redux-form";
 import { sendGAEvent } from "@next/third-parties/google";
 
 const required = (errorMsg) => (value) =>
@@ -84,7 +84,14 @@ let CaseSearch = (props) => {
     // };
 
     const onHandleSubmit = (values) => {
-        //spinnerState();
+        if (Object.keys(values).length === 0) {
+            console.log(props.error);
+
+            throw new SubmissionError({
+                basicSearch: t("myportal:searchcases-validation-required"),
+                _error: "required",
+            });
+        } else {
             router.push({
                 pathname:
                     router.locale == "cy"
@@ -93,6 +100,7 @@ let CaseSearch = (props) => {
                 query: { q: values.basicSearch },
                 shallow: true,
             });
+        }
     };
 
     return (
@@ -106,11 +114,6 @@ let CaseSearch = (props) => {
 
                         <Field
                             validate={[
-                                required(
-                                    t(
-                                        "myportal:searchcases-validation-required"
-                                    )
-                                ),
                                 minLength(
                                     t(
                                         "myportal:searchcases-validation-minlength"