Add validation

[MAILPOET-2453]

assets/js/src/form_editor/blocks/custom_text/custom_text.jsx

@@ -22,6 +22,10 @@ export function getSettings(customField) {
         type: 'boolean',
         default: false,
       },
+      validate: {
+        type: 'string',
+        default: '',
+      },
       customFieldId: {
         type: 'string',
         default: customField.id,

assets/js/src/form_editor/blocks/custom_text/edit.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   Panel,
-  PanelBody,
+  PanelBody, SelectControl,
   TextControl,
   ToggleControl,
 } from '@wordpress/components';
@@ -30,6 +30,28 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
             checked={attributes.mandatory}
             onChange={(mandatory) => (setAttributes({ mandatory }))}
           />
+          <SelectControl
+            label={`${MailPoet.I18n.t('customFieldValidateFor')}:`}
+            options={[
+              {
+                label: MailPoet.I18n.t('customFieldValidateNothing'),
+                value: '',
+              },
+              {
+                label: MailPoet.I18n.t('customFieldValidateNumbersOnly'),
+                value: 'alphanum',
+              },
+              {
+                label: MailPoet.I18n.t('customFieldValidateAlphanumerical'),
+                value: 'number',
+              },
+              {
+                label: MailPoet.I18n.t('customFieldValidatePhoneNumber'),
+                value: 'phone',
+              },
+            ]}
+            onChange={(validate) => (setAttributes({ validate }))}
+          />
         </PanelBody>
       </Panel>
 

views/form/editor.html

@@ -43,6 +43,11 @@
   'settingsPleaseSelectList': __('Please select a list'),
   'fieldsBlocksCategory': __('Fields'),
   'customFieldsBlocksCategory': __('Custom Fields'),
+  'customFieldValidateFor': __('Validate for'),
+  'customFieldValidateNothing': __('Nothing'),
+  'customFieldValidateNumbersOnly': __('Numbers only'),
+  'customFieldValidateAlphanumerical': __('Alphanumerical'),
+  'customFieldValidatePhoneNumber': __('Phone number, (+,-,#,(,) and spaces allowed)'),
   'blockMandatory': __('Mandatory field'),
   'blockFirstName': __('First name'),
   'blockFirstNameDescription': __('Input field used to catch subscribers’ first names.'),