Forms Block: Fix Broken URL Input Validation (#40490)

* Fix: Form Block URL Input Bad Validation

The `pattern` attribute for URL input validation does not match the PHP
regex used for validating input. This aligns the two types of validation
so that they validate or invalidate inputs in the same way.

* changelog

* Added Jetpack changelog.

* Added comments that the two URL validation regex's should be kept in sync.

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/12239331775

Upstream-Ref: Automattic/jetpack@df18712

CHANGELOG.md

@@ -17,6 +17,7 @@ This is an alpha version! The changes listed here are not final.
 - WordPress 6.7 Compatibility: Fixed notices caused by translation calls happening too early in the load order.
 
 ### Bug fixes
+- Form Block: fixed validation of URL input types to allow query strings.
 - Google Fonts: Clean up the google fonts data if either google fonts module is disabled or Jetpack is disabled
 
 ### Other changes <!-- Non-user-facing changes go here. This section will not be copied to readme.txt. -->

jetpack_vendor/automattic/jetpack-forms/CHANGELOG.md

@@ -12,6 +12,9 @@ This is an alpha version! The changes listed here are not final.
 ### Changed
 - Updated package dependencies.
 
+### Fixed
+- Form Block: fixed validation of URL input types to allow query strings.
+
 ## [0.34.2] - 2024-11-26
 ### Changed
 - Update dependencies. [#39855]

jetpack_vendor/automattic/jetpack-forms/src/contact-form/class-contact-form-field.php

@@ -227,6 +227,7 @@ public function validate() {
 		switch ( $field_type ) {
 			case 'url':
 				if ( ! is_string( $field_value ) || empty( $field_value ) || ! preg_match(
+					// Changes to this regex should be synced with the regex in the render_url_field method of this class as both validate the same input. Note that this regex is in PCRE format.
 					'%^(?:(?:https?|ftp)://)?(?:\S+(?::\S*)?@|\d{1,3}(?:\.\d{1,3}){3}|(?:(?:[a-z\d\x{00a1}-\x{ffff}]+-?)*[a-z\d\x{00a1}-\x{ffff}]+)(?:\.(?:[a-z\d\x{00a1}-\x{ffff}]+-?)*[a-z\d\x{00a1}-\x{ffff}]+)*(?:\.[a-z\x{00a1}-\x{ffff}]{2,6}))(?::\d+)?(?:[^\s]*)?$%iu',
 					$field_value
 				) ) {
@@ -590,7 +591,8 @@ public function render_url_field( $id, $label, $value, $class, $required, $requi
 			'title'              => $custom_validation_message,
 			'oninvalid'          => 'setCustomValidity("' . $custom_validation_message . '")',
 			'oninput'            => 'setCustomValidity("")',
-			'pattern'            => '(([:\/a-zA-Z0-9_\-]+)?(\.[a-zA-Z0-9_\-\/]+)+)',
+			// Changes to this regex should be synced with the regex in the URL validation of the validate method of this class as both validate the same input. Note that this regex is in ECMAScript (JS) format.
+			'pattern'            => '(?:(?:[Hh][Tt][Tt][Pp][Ss]?|[Ff][Tt][Pp]):\/\/)?(?:\S+(?::\S*)?@|\d{1,3}(?:\.\d{1,3}){3}|(?:(?:[a-zA-Z\d\u00a1-\uffff]+-?)*[a-zA-Z\d\u00a1-\uffff]+)(?:\.(?:[a-zA-Z\d\u00a1-\uffff]+-?)*[a-zA-Z\d\u00a1-\uffff]+)*(?:\.[a-zA-Z\u00a1-\uffff]{2,6}))(?::\d+)?(?:[^\s]*)?',
 			'data-type-override' => 'url',
 		);
 

jetpack_vendor/i18n-map.php

@@ -50,7 +50,7 @@
     ),
     'jetpack-forms' => array(
       'path' => 'jetpack_vendor/automattic/jetpack-forms',
-      'ver' => '0.34.3-alpha1733418279',
+      'ver' => '0.34.3-alpha1733759714',
     ),
     'jetpack-image-cdn' => array(
       'path' => 'jetpack_vendor/automattic/jetpack-image-cdn',