Form validations

src/components/Components/Form/ErrorMessage.jsx

@@ -0,0 +1,17 @@
+export function ErrorMessage({ inputId, message }) {
+  return (
+    <span
+      className="nsw-form__helper nsw-form__helper--error"
+      id={`${inputId}-error-text`}
+    >
+      <span
+        className="material-icons nsw-material-icons"
+        focusable="false"
+        aria-hidden="true"
+      >
+        cancel
+      </span>
+      {message}
+    </span>
+  );
+}

src/customizations/volto-form-block/components/Field.jsx

@@ -51,6 +51,7 @@ const Field = (props) => {
     widget,
     shouldShow = true,
     display_values,
+    errors = {},
   } = props;
   let { value } = props;
   // A value of `null` is a touched field with no value
@@ -59,13 +60,40 @@ const Field = (props) => {
     value !== null &&
     value === undefined
   ) {
-    value = props.default_value;
+    if (
+      !['select', 'single_choice', 'multiple_choice'].includes(field_type) ||
+      input_values?.includes(props.default_value) || // Single-select includes the value
+      (Array.isArray(props.default_value) &&
+        props.default_value?.every((default_value) =>
+          input_values?.includes(props.default_value),
+        )) // Multi-select includes the value
+    ) {
+      value = props.default_value;
+    }
   }
   const intl = useIntl();
 
   const isInvalid = () => {
-    return !isOnEdit && !valid;
+    let isInvalid = !isOnEdit && !valid;
+    // TODO: Re-enable frontend-validations
+    // if (validations && validations.length > 0) {
+    //   validations.forEach((validation) => {
+    //     const validatorObject = validationObjects[validation.validation_type];
+    //     const validator = validatorObject?.validator;
+    //     if (validator) {
+    //       const validatorProperties = Object.keys(validatorObject.properties)
+    //       isInvalid = !validator({
+    //         value,
+    //         ...pick(validation, validatorProperties),
+    //       });
+    //     }
+    //   })
+    // }
+
+    return isInvalid;
   };
+  const errorList =
+    typeof errors === 'object' && errors !== null ? Object.values(errors) : {};
 
   if (widget) {
     const Widget = widgetMapping[widget];
@@ -97,24 +125,31 @@ const Field = (props) => {
       <Widget
         {...props}
         id={name}
+        name={name}
         title={label}
         value={value}
         valueList={valueList}
         invalid={isInvalid().toString()}
+        error={errorList}
         {...(isInvalid() ? { className: 'is-invalid' } : {})}
       />
     );
   }
 
   return (
-    <MaybeWrap condition={isOnEdit} as="div" inert={isOnEdit ? '' : null}>
+    <MaybeWrap
+      condition={isOnEdit}
+      as="div"
+      inert={isOnEdit && field_type !== 'static_text' ? '' : null}
+    >
       {field_type === 'text' && (
         <TextWidget
           id={name}
           name={name}
           title={label}
           description={description}
           required={required}
+          error={errorList}
           onChange={onChange}
           value={value}
           isDisabled={disabled}
@@ -130,6 +165,7 @@ const Field = (props) => {
           title={label}
           description={description}
           required={required}
+          error={errorList}
           onChange={onChange}
           value={value}
           rows={10}
@@ -148,6 +184,7 @@ const Field = (props) => {
           getVocabularyTokenTitle={() => {}}
           choices={[...(input_values?.map((v) => [v, v]) ?? [])]}
           value={value}
+          error={errorList}
           onChange={onChange}
           placeholder={intl.formatMessage(messages.select_a_value)}
           aria-label={intl.formatMessage(messages.select_a_value)}
@@ -165,6 +202,7 @@ const Field = (props) => {
           description={description}
           required={required}
           onChange={onChange}
+          error={errorList}
           valueList={[
             ...(input_values?.map((v) => ({ value: v, label: v })) ?? []),
           ]}
@@ -182,6 +220,7 @@ const Field = (props) => {
           description={description}
           required={required}
           onChange={onChange}
+          error={errorList}
           valueList={[
             ...(input_values?.map((v) => ({ value: v, label: v })) ?? []),
           ]}
@@ -198,6 +237,7 @@ const Field = (props) => {
           title={label}
           description={description}
           required={required}
+          error={errorList}
           onChange={onChange}
           value={!!value}
           isDisabled={disabled}
@@ -214,6 +254,7 @@ const Field = (props) => {
           dateOnly={true}
           noPastDates={false}
           resettable={false}
+          error={errorList}
           onChange={onChange}
           value={value}
           isDisabled={disabled}
@@ -230,6 +271,7 @@ const Field = (props) => {
           description={description}
           type="file"
           required={required}
+          error={errorList}
           invalid={isInvalid().toString()}
           isDisabled={disabled}
           onChange={onChange}
@@ -243,6 +285,7 @@ const Field = (props) => {
           name={name}
           title={label}
           description={description}
+          error={errorList}
           required={required}
           onChange={onChange}
           value={value}
@@ -258,6 +301,7 @@ const Field = (props) => {
             id={name}
             name={name}
             title={label}
+            error={errorList}
             description={description}
             onChange={onChange}
             value={value}
@@ -281,6 +325,7 @@ const Field = (props) => {
               value={value}
               isDisabled={disabled}
               formHasErrors={formHasErrors}
+              error={errorList}
               invalid={isInvalid().toString()}
               {...(isInvalid() ? { className: 'is-invalid' } : {})}
             />,

src/customizations/volto-form-block/components/FormView.jsx

@@ -31,7 +31,7 @@ const messages = defineMessages({
   },
   field_is_required: {
     id: 'field_is_required',
-    defaultMessage: '{fieldLabel} is required',
+    defaultMessage: 'This field is required',
   },
 });
 
@@ -45,48 +45,59 @@ function useIsClient() {
   return isClient;
 }
 
-function ErrorMessageBox({ formId, formErrors = [], fields }) {
+function ErrorMessageBox({ formId, formErrors = {}, fields }) {
   const intl = useIntl();
   const allFieldData = React.useMemo(() => {
     return fields.reduce((errorData, currentField) => {
       const fieldName = getFieldName(currentField.label, currentField.id);
-      if (formErrors.includes(fieldName)) {
+      if (formErrors[fieldName]) {
         errorData[fieldName] = currentField;
       }
       return errorData;
     }, {});
   }, [fields, formErrors]);
 
-  if (formErrors.length < 1) {
+  if (Object.keys(formErrors).length < 1) {
     return null;
   }
 
   return (
     <div
-      class="nsw-in-page-alert nsw-in-page-alert--error"
+      className="nsw-in-page-alert nsw-in-page-alert--error"
       id={`${formId}-errors`}
     >
       <span
-        class="material-icons nsw-material-icons nsw-in-page-alert__icon"
+        className="material-icons nsw-material-icons nsw-in-page-alert__icon"
         focusable="false"
         aria-hidden="true"
       >
         cancel
       </span>
-      <div class="nsw-in-page-alert__content">
-        <p class="nsw-h5">{intl.formatMessage(messages.error)}</p>
+      <div className="nsw-in-page-alert__content">
+        <p className="nsw-h5">{intl.formatMessage(messages.error)}</p>
         {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
         <ul role="list">
-          {formErrors.map((fieldName) => {
-            const { label, id } = allFieldData[fieldName];
+          {Object.keys(formErrors).map((fieldName) => {
+            const fieldData = allFieldData[fieldName];
+            if (!fieldData) {
+              return <React.Fragment key={fieldName}></React.Fragment>;
+            }
+            const { label, id, validations = [] } = fieldData;
             const name = getFieldName(label, id);
+            const validationsWithErrors = Object.keys(formErrors[name]);
+            const validationIdToShow = validations.find((validation) =>
+              validationsWithErrors.includes(validation),
+            );
+            const validationMessageToShow = formErrors[name].required
+              ? 'required'
+              : validationIdToShow;
+            const errorMessage = validationMessageToShow
+              ? `${label}: ${formErrors[name][validationMessageToShow]}`
+              : intl.formatMessage(messages.field_is_required);
+
             return (
-              <li>
-                <a href={`#field-${name}`}>
-                  {intl.formatMessage(messages.field_is_required, {
-                    fieldLabel: label,
-                  })}
-                </a>
+              <li key={fieldName}>
+                <a href={`#field-${name}`}>{errorMessage}</a>
               </li>
             );
           })}
@@ -102,7 +113,7 @@ const FieldRenderWrapper = ({
   index,
   blockData,
   onChangeFormData,
-  formErrors,
+  formErrors = {},
   isValidField,
   FieldSchema,
 }) => {
@@ -197,8 +208,9 @@ Only required if '${targetField.label}' is ${validatorLabel} to '${show_when_to}
           value={value}
           description={description}
           valid={isValidField(name)}
-          formHasErrors={formErrors?.length > 0}
+          errors={formErrors[name]}
           shouldShow={shouldShow}
+          formHasErrors={Object.keys(formErrors).length > 0} // TODO: Deprecate legacy prop
         />
       </div>
     );
@@ -214,8 +226,9 @@ Only required if '${targetField.label}' is ${validatorLabel} to '${show_when_to}
       value={value}
       description={description}
       valid={isValidField(name)}
-      formHasErrors={formErrors?.length > 0}
+      errors={formErrors[name]}
       shouldShow={shouldShow}
+      formHasErrors={Object.keys(formErrors).length > 0} // TODO: Deprecate legacy prop
     />
   );
 };
@@ -236,7 +249,7 @@ const FormView = ({
   const FieldSchema = config.blocks.blocksConfig.form.fieldSchema;
 
   const isValidField = (field) => {
-    return formErrors?.indexOf(field) < 0;
+    return !formErrors.hasOwnProperty(field) || formErrors[field] === null;
   };
 
   return (
@@ -266,7 +279,7 @@ const FormView = ({
       ) : (
         // TODO: The original component has a `loading` state. Is this needed here?
         <form id={id} className="nsw-form" onSubmit={onSubmit} method="post">
-          {formErrors.length > 0 && (
+          {Object.keys(formErrors).length > 0 && (
             <ErrorMessageBox
               formId={id}
               formErrors={formErrors}
@@ -288,7 +301,14 @@ const FormView = ({
                 onChange={() => {}}
                 disabled
                 valid={isValidField}
-                formHasErrors={formErrors?.length > 0}
+                formHasErrors={!!formErrors[field.name]}
+                errors={
+                  formErrors[
+                    'static_field_' +
+                      (field.field_id ??
+                        field.name?.toLowerCase()?.replace(' ', ''))
+                  ]
+                }
               />
             );
           })}
@@ -299,6 +319,7 @@ const FormView = ({
                 subblock={subblock}
                 index={index}
                 formData={formData}
+                formErrors={formErrors}
                 blockData={data}
                 onChangeFormData={onChangeFormData}
                 isValidField={isValidField}