added better error messages

Author: nrakhshan

client/src/components/form/Checkboxes/Checkboxes.jsx

@@ -17,6 +17,7 @@ const Checkboxes = ({
   setSelectAll,
   autoFocus,
   isRequired,
+  errorFeedback,
 }) => {
   useEffect(() => {
     if (selectAll) {
@@ -166,6 +167,7 @@ const Checkboxes = ({
             </React.Fragment>
           );
         })}
+        {errorFeedback ? <p className="text-input-error-message">{errorFeedback}</p> : <></>}
       </div>
     </>
   );
@@ -186,6 +188,7 @@ Checkboxes.propTypes = {
   setSelectAll: PropTypes.func,
   autoFocus: PropTypes.bool,
   isRequired: PropTypes.bool,
+  errorFeedback: PropTypes.string,
 };
 
 export { Checkboxes };

client/src/components/form/Checkboxes/Checkboxes.scss

@@ -81,3 +81,7 @@ input[type='checkbox']:disabled::before {
   display: inline-block;
   font-size: 16px;
 }
+
+.text-input-error-message {
+  margin-top: 20px;
+}

client/src/pages/Registration/RegistrationFields.jsx

@@ -237,6 +237,7 @@ export const fields = {
       inputTitle: 'Country Code',
       maxLength: 4,
       noEdit: false,
+      errorMessage: 'Please enter an area code',
       validation: (value) => {
         if (/^[+0-9]*$/.test(value)) {
           if (value.length <= 4) {
@@ -305,6 +306,7 @@ export const fields = {
       inputTitle: 'Country Code',
       maxLength: 4,
       noEdit: false,
+      errorMessage: 'Please enter an area code',
       validation: (value) => {
         if (/^[+0-9]*$/.test(value)) {
           if (value.length <= 4) {
@@ -392,6 +394,7 @@ export const fields = {
       ],
       isRequiredInput: true,
       noEdit: false,
+      errorMessage: 'Please choose None if you do not have any allergies or dietary restrictions',
       localStorageKey: 'registration-allergies',
       onChanged: (values, disableField) => {
         if (values.includes('Other')) {

client/src/pages/Registration/RegistrationForm.jsx

@@ -28,6 +28,7 @@ const PageRegistrationForm = ({ editFieldsPage, initialValues, onEditSubmit }) =
   const [canRegister, setCanRegister] = useState(true);
   const [checkoutUrl, setCheckoutUrl] = useState('');
   const [errorAfterEdit, setErrorAfterEdit] = useState(false);
+  const [anyError, setAnyError] = useState(false);
 
   const { axios } = useAxios();
 
@@ -46,8 +47,10 @@ const PageRegistrationForm = ({ editFieldsPage, initialValues, onEditSubmit }) =
     const isFormValid = validateForm();
     // console.log(isFormValid)
     if (!isFormValid) {
+      setAnyError(true);
       return setCanRegister(true);
     } else {
+      setAnyError(true);
       try {
         // const convertedFroshObject = { ...froshObject };
 
@@ -297,6 +300,7 @@ const PageRegistrationForm = ({ editFieldsPage, initialValues, onEditSubmit }) =
                       : false
                   }
                   disabledIndices={field.disabledIndices}
+                  errorFeedback={field.errorFeedback}
                   initialSelectedIndices={
                     editFieldsPage === true
                       ? field.values.reduce((prev, curr, index) => {
@@ -436,6 +440,11 @@ const PageRegistrationForm = ({ editFieldsPage, initialValues, onEditSubmit }) =
                   title: 'General',
                   component: (
                     <>
+                      {anyError == true && selectedTab == 0 ? (
+                        <h3 className="registration-error-msg">
+                          Please make sure you have filled out all required fields correctly.
+                        </h3>
+                      ) : null}
                       <div className="registration-first-step-header-container">
                         <img className="registration-icon-logo" src={MainFroshLogo}></img>
                         <div>
@@ -459,7 +468,16 @@ const PageRegistrationForm = ({ editFieldsPage, initialValues, onEditSubmit }) =
                 },
                 {
                   title: 'Health & Safety',
-                  component: generateStepComponent(formFields['HealthSafety'], 'HealthSafety'),
+                  component: (
+                    <>
+                      {anyError == true && selectedTab == 1 ? (
+                        <h3 className="registration-error-msg">
+                          Please make sure you have filled out all required fields correctly.
+                        </h3>
+                      ) : null}
+                      {generateStepComponent(formFields['HealthSafety'], 'HealthSafety')}
+                    </>
+                  ),
                 },
                 {
                   title: 'Extra Events',

client/src/pages/Registration/RegistrationForm.scss

@@ -14,6 +14,15 @@
   max-width: 1000px;
 }
 
+.registration-error-msg {
+  color: rgb(230, 41, 41);
+  font-size: 18px;
+  font-weight: 400;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
 .registration-tab-content {
   padding: 20px 20px;
   display: flex;