Fixed phone number and required field validations.

assets/js/mailchimp.js

@@ -93,4 +93,19 @@
 			});
 		});
 	}
+
+	// Phone validation custom error message.
+	if ($('.mailchimp-sf-phone').length > 0) {
+		$('.mailchimp-sf-phone').each(function () {
+			$(this)
+				.on('input', function () {
+					this.setCustomValidity('');
+				})
+				.on('invalid', function () {
+					if (!this.validity.valid) {
+						this.setCustomValidity(window.mailchimpSF.phone_validation_error);
+					}
+				});
+		});
+	}
 })(window.jQuery);

includes/blocks/mailchimp-form-field/edit.js

@@ -232,37 +232,20 @@ export const MailchimpFormField = (props) => {
 				);
 
 			case 'phone':
-				if (field?.options?.phone_format === 'US') {
-					return (
-						<>
-							<input
-								type="text"
-								size="2"
-								maxLength="3"
-								name={`${tag}[area]`}
-								id={`${tag}-area`}
-								className="mc_input mc_phone"
-							/>
-							<input
-								type="text"
-								size="2"
-								maxLength="3"
-								name={`${tag}[detail1]`}
-								id={`${tag}-detail1`}
-								className="mc_input mc_phone"
-							/>
-							<input
-								type="text"
-								size="5"
-								maxLength="4"
-								name={`${tag}[detail2]`}
-								id={`${tag}-detail2`}
-								className="mc_input mc_phone"
-							/>
-						</>
-					);
-				}
-				return <input type="text" size="18" name={tag} id={tag} className="mc_input" />;
+				// eslint-disable-next-line no-case-declarations
+				const isUSPhone = field?.options?.phone_format === 'US';
+				// eslint-disable-next-line no-case-declarations
+				const placeholder = isUSPhone ? '(###) ### - ####' : '';
+				return (
+					<input
+						type="tel"
+						size="18"
+						name={tag}
+						id={tag}
+						className="mc_input"
+						placeholder={placeholder}
+					/>
+				);
 
 			case 'email':
 			case 'url':

includes/class-mailchimp-form-submission.php

@@ -178,6 +178,64 @@ public function handle_form_submission() {
 		return $message;
 	}
 
+	/**
+	 * Validate phone
+	 *
+	 * @param string $opt_val Option value.
+	 * @param array  $data    Data.
+	 * @return string|WP_Error Option value or error.
+	 */
+	public function validate_phone( $opt_val, $data ) {
+		if ( empty( $opt_val ) ) {
+			return '';
+		}
+
+		// Backwards compatibility for old phone format.
+		if ( is_array( $opt_val ) ) {
+			$opt_val = implode( '-', $opt_val );
+		}
+
+		$opt_val = trim( $opt_val );
+
+		// Validate phone number.
+		if ( preg_match( '/^\+?[\d\s\-\(\)\.]*$/', $opt_val ) ) {
+			return $opt_val;
+		} else {
+			/* translators: %s: field name */
+			$message = sprintf( esc_html__( 'Please enter a valid %s.', 'mailchimp' ), esc_html( $data['name'] ) );
+			return new WP_Error( 'mc_phone_validation', $message );
+		}
+	}
+
+	/**
+	 * Validate address
+	 *
+	 * @param array $opt_val Option value
+	 * @param array $data Data
+	 * @return mixed
+	 */
+	public function validate_address( $opt_val, $data ) {
+		if ( true === (bool) $data['required'] ) {
+			if ( empty( $opt_val['addr1'] ) || empty( $opt_val['city'] ) ) {
+				/* translators: %s: field name */
+				$message = sprintf( esc_html__( '%s: Please enter a complete address.', 'mailchimp' ), esc_html( $data['name'] ) );
+				$error   = new WP_Error( 'invalid_address_merge', $message );
+				return $error;
+			}
+		} elseif ( empty( $opt_val['addr1'] ) || empty( $opt_val['city'] ) ) {
+			return false;
+		}
+
+		$merge          = new stdClass();
+		$merge->addr1   = $opt_val['addr1'];
+		$merge->addr2   = $opt_val['addr2'];
+		$merge->city    = $opt_val['city'];
+		$merge->state   = $opt_val['state'];
+		$merge->zip     = $opt_val['zip'];
+		$merge->country = $opt_val['country'];
+		return $merge;
+	}
+
 	/**
 	 * Prepare the merge fields body for the API request.
 	 *
@@ -193,29 +251,20 @@ public function prepare_merge_fields_body( $merge_fields, $skip_merge_validation
 			$opt = 'mc_mv_' . $tag;
 
 			// Skip if the field is not required and not submitted.
-			if ( ( 'Y' !== $merge_field['required'] && ! isset( $_POST[ $opt ] ) ) || $skip_merge_validation ) {
+			if ( ( true !== (bool) $merge_field['required'] && ! isset( $_POST[ $opt ] ) ) || $skip_merge_validation ) {
 				continue;
 			}
 
 			$opt_val = isset( $_POST[ $opt ] ) ? map_deep( stripslashes_deep( $_POST[ $opt ] ), 'sanitize_text_field' ) : '';
 
 			switch ( $merge_field['type'] ) {
 				/**
-				 * US Phone validation
-				 *
-				 * - Merge field is phone
-				 * - Phone format is set in Mailchimp account
-				 * - Phone format is US in Mailchimp account
+				 * US/International Phone validation
 				 */
 				case 'phone':
-					if (
-						isset( $merge_field['options']['phone_format'] )
-						&& 'US' === $merge_field['options']['phone_format']
-					) {
-						$opt_val = mailchimp_sf_merge_validate_phone( $opt_val, $merge_field );
-						if ( is_wp_error( $opt_val ) ) {
-							return $opt_val;
-						}
+					$opt_val = $this->validate_phone( $opt_val, $merge_field );
+					if ( is_wp_error( $opt_val ) ) {
+						return $opt_val;
 					}
 					break;
 
@@ -227,7 +276,7 @@ public function prepare_merge_fields_body( $merge_fields, $skip_merge_validation
 				 */
 				case 'address':
 					if ( is_array( $opt_val ) ) {
-						$validate = mailchimp_sf_merge_validate_address( $opt_val, $merge_field );
+						$validate = $this->validate_address( $opt_val, $merge_field );
 						if ( is_wp_error( $validate ) ) {
 							return $validate;
 						}
@@ -260,9 +309,9 @@ public function prepare_merge_fields_body( $merge_fields, $skip_merge_validation
 			/**
 			 * Required fields
 			 *
-			 * If the field is required and empty, return an error
+			 * If the field is required and empty, +return an error
 			 */
-			if ( 'Y' === $merge_field['required'] && trim( $opt_val ) === '' ) {
+			if ( true === (bool) $merge_field['required'] && empty( $opt_val ) ) {
 				/* translators: %s: field name */
 				$message = sprintf( esc_html__( 'You must fill in %s.', 'mailchimp' ), esc_html( $merge_field['name'] ) );
 				$error   = new WP_Error( 'missing_required_field', $message );
@@ -512,6 +561,16 @@ protected function validate_form_submission() {
 			return new WP_Error( 'spam', $spam_message );
 		}
 
+		// Early return if the email is not set
+		if ( empty( $_POST['mc_mv_EMAIL'] ) ) {
+			return new WP_Error( 'email_required', esc_html__( 'Please enter your email address.', 'mailchimp' ) );
+		}
+
+		// Check if the email is valid
+		if ( ! is_email( sanitize_email( wp_unslash( $_POST['mc_mv_EMAIL'] ) ) ) ) {
+			return new WP_Error( 'invalid_email', esc_html__( 'Please enter a valid email address.', 'mailchimp' ) );
+		}
+
 		/**
 		 * Filter to allow for custom validation of the form submission.
 		 *

includes/mailchimp-deprecated-functions.php

@@ -113,3 +113,39 @@ function mailchimp_sf_merge_remove_empty( $merge ) {
 	$form_submission = new Mailchimp_Form_Submission();
 	return $form_submission->remove_empty_merge_fields( $merge );
 }
+
+
+/**
+ * Validate phone
+ *
+ * @deprecated x.x.x
+ *
+ * @param array $opt_val Option value.
+ * @param array $data    Data.
+ * @return string|WP_Error Option value or error.
+ */
+function mailchimp_sf_merge_validate_phone( $opt_val, $data ): string|WP_Error {
+	_deprecated_function( __FUNCTION__, 'x.x.x', 'Mailchimp_Form_Submission::validate_phone()' );
+
+	if ( is_array( $opt_val ) ) {
+		$opt_val = implode( '-', $opt_val );
+	}
+	$form_submission = new Mailchimp_Form_Submission();
+	return $form_submission->validate_phone( $opt_val, $data );
+}
+
+/**
+ * Validate address
+ *
+ * @deprecated x.x.x
+ *
+ * @param array $opt_val Option value.
+ * @param array $data    Data.
+ * @return mixed
+ */
+function mailchimp_sf_merge_validate_address( $opt_val, $data ) {
+	_deprecated_function( __FUNCTION__, 'x.x.x', 'Mailchimp_Form_Submission::validate_address()' );
+
+	$form_submission = new Mailchimp_Form_Submission();
+	return $form_submission->validate_address( $opt_val, $data );
+}

mailchimp.php

@@ -164,7 +164,8 @@ function mailchimp_sf_load_resources() {
 		'mailchimp_sf_main_js',
 		'mailchimpSF',
 		array(
-			'ajax_url' => trailingslashit( home_url() ),
+			'ajax_url'               => trailingslashit( home_url() ),
+			'phone_validation_error' => esc_html__( 'Please enter a valid phone number.', 'mailchimp' ),
 		)
 	);
 
@@ -510,7 +511,7 @@ function mailchimp_sf_save_general_form_settings() {
 	if ( is_array( $mv ) ) {
 		foreach ( $mv as $mv_var ) {
 			$opt = 'mc_mv_' . $mv_var['tag'];
-			if ( isset( $_POST[ $opt ] ) || 'Y' === $mv_var['required'] ) {
+			if ( isset( $_POST[ $opt ] ) || true === (bool) $mv_var['required'] ) {
 				update_option( $opt, 'on' );
 			} else {
 				update_option( $opt, 'off' );
@@ -787,65 +788,6 @@ function mailchimp_sf_check_status( $endpoint ) {
 	return $subscriber['status'];
 }
 
-/**
- * Validate phone
- *
- * @param array $opt_val Option value
- * @param array $data Data
- * @return void
- */
-function mailchimp_sf_merge_validate_phone( $opt_val, $data ) {
-	// This filters out all 'falsey' elements
-	$opt_val = array_filter( $opt_val );
-	// If they weren't all empty
-	if ( ! $opt_val ) {
-		return;
-	}
-
-	$opt_val = implode( '-', $opt_val );
-	if ( strlen( $opt_val ) < 12 ) {
-		$opt_val = '';
-	}
-
-	if ( ! preg_match( '/[0-9]{0,3}-[0-9]{0,3}-[0-9]{0,4}/A', $opt_val ) ) {
-		/* translators: %s: field name */
-		$message = sprintf( esc_html__( '%s must consist of only numbers', 'mailchimp' ), esc_html( $data['name'] ) );
-		$error   = new WP_Error( 'mc_phone_validation', $message );
-		return $error;
-	}
-
-	return $opt_val;
-}
-
-/**
- * Validate address
- *
- * @param array $opt_val Option value
- * @param array $data Data
- * @return mixed
- */
-function mailchimp_sf_merge_validate_address( $opt_val, $data ) {
-	if ( 'Y' === $data['required'] ) {
-		if ( empty( $opt_val['addr1'] ) || empty( $opt_val['city'] ) ) {
-			/* translators: %s: field name */
-			$message = sprintf( esc_html__( 'You must fill in %s.', 'mailchimp' ), esc_html( $data['name'] ) );
-			$error   = new WP_Error( 'invalid_address_merge', $message );
-			return $error;
-		}
-	} elseif ( empty( $opt_val['addr1'] ) || empty( $opt_val['city'] ) ) {
-		return false;
-	}
-
-	$merge          = new stdClass();
-	$merge->addr1   = $opt_val['addr1'];
-	$merge->addr2   = $opt_val['addr2'];
-	$merge->city    = $opt_val['city'];
-	$merge->state   = $opt_val['state'];
-	$merge->zip     = $opt_val['zip'];
-	$merge->country = $opt_val['country'];
-	return $merge;
-}
-
 /**
  * Verify key
  *

mailchimp_widget.php

@@ -452,17 +452,9 @@ function mailchimp_form_field( $data, $num_fields, $should_display = null, $labe
 	<input type="text" size="18" maxlength="5" value="" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="mc_input" />';
 				break;
 			case 'phone':
-				if ( isset( $data['options']['phone_format'] ) && 'US' === $data['options']['phone_format'] ) {
-					$html .= '
-			<input type="text" size="2" maxlength="3" value="" name="' . esc_attr( $opt . '[area]' ) . '" id="' . esc_attr( $opt . '-area' ) . '" class="mc_input mc_phone" />
-			<input type="text" size="2" maxlength="3" value="" name="' . esc_attr( $opt . '[detail1]' ) . '" id="' . esc_attr( $opt . '-detail1' ) . '" class="mc_input mc_phone" />
-			<input type="text" size="5" maxlength="4" value="" name="' . esc_attr( $opt . '[detail2]' ) . '" id="' . esc_attr( $opt . '-detail2' ) . '" class="mc_input mc_phone" />
-				';
-				} else {
-					$html .= '
-						<input type="text" size="18" value="" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="mc_input" />
-					';
-				}
+				$is_us_phone = isset( $data['options']['phone_format'] ) && 'US' === $data['options']['phone_format'];
+				$html       .= '
+					<input type="tel" size="20" minlength="6" maxlength="20" pattern="^\+?[\d\s\-\(\)\.]*$" value="" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="mc_input mailchimp-sf-phone" placeholder="' . esc_attr( $is_us_phone ? '(###) ### - ####' : '' ) . '" />';
 				break;
 			case 'email':
 			case 'url':