feat: validate email field

src/components/View.jsx

@@ -8,6 +8,7 @@ import FormView from 'volto-form-block/components/FormView';
 import { formatDate } from '@plone/volto/helpers/Utils/Date';
 import config from '@plone/volto/registry';
 import { Captcha } from 'volto-form-block/components/Widget';
+import { isValidEmail } from 'volto-form-block/helpers/validators';
 
 const messages = defineMessages({
   formSubmitted: {
@@ -119,6 +120,7 @@ const View = ({ data, id, path }) => {
         config.blocks.blocksConfig.form.additionalFields?.filter(
           (f) => f.id === fieldType && f.isValid !== undefined,
         )?.[0] ?? null;
+
       if (
         subblock.required &&
         additionalField &&
@@ -138,6 +140,12 @@ const View = ({ data, id, path }) => {
           JSON.stringify(formData[name]?.value ?? {}) === '{}')
       ) {
         v.push(name);
+      } else if (
+        fieldType === 'from' &&
+        formData[name]?.value &&
+        !isValidEmail(formData[name].value)
+      ) {
+        v.push(name);
       }
     });
 
@@ -169,9 +177,10 @@ const View = ({ data, id, path }) => {
             let name = getFieldName(subblock.label, subblock.id);
             if (formattedFormData[name]?.value) {
               formattedFormData[name].field_id = subblock.field_id;
-              const isAttachment = config.blocks.blocksConfig.form.attachment_fields.includes(
-                subblock.field_type,
-              );
+              const isAttachment =
+                config.blocks.blocksConfig.form.attachment_fields.includes(
+                  subblock.field_type,
+                );
               const isDate = subblock.field_type === 'date';
 
               if (isAttachment) {

src/helpers/validators.js

@@ -0,0 +1,8 @@
+export const isValidEmail = (email) => {
+  // Email Regex taken from from WHATWG living standard:
+  // https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
+  const emailRegex =
+    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/;
+  const isValid = emailRegex.test(email);
+  return isValid;
+};