Add client side postcode validation

assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput, isPostcode } from '@woocommerce/blocks-checkout';
 import {
 	BillingCountryInput,
 	ShippingCountryInput,
@@ -144,6 +144,35 @@ const AddressForm = ( {
 
 	id = id || instanceId;
 
+	/**
+	 * Custom validation handler for fields with field specific handling.
+	 */
+	const customValidationHandler = (
+		inputObject: HTMLInputElement,
+		field: string,
+		customValues: {
+			country: string;
+		}
+	): boolean => {
+		if (
+			field === 'postcode' &&
+			customValues.country &&
+			! isPostcode( {
+				postcode: inputObject.value,
+				country: customValues.country,
+			} )
+		) {
+			inputObject.setCustomValidity(
+				__(
+					'Please enter a valid postcode',
+					'woo-gutenberg-products-block'
+				)
+			);
+			return false;
+		}
+		return true;
+	};
+
 	return (
 		<div id={ id } className="wc-block-components-address-form">
 			{ addressFormFields.map( ( field ) => {
@@ -229,9 +258,19 @@ const AddressForm = ( {
 						onChange={ ( newValue: string ) =>
 							onChange( {
 								...values,
-								[ field.key ]: newValue,
+								[ field.key ]:
+									field.key === 'postcode'
+										? newValue.trimStart().toUpperCase()
+										: newValue,
 							} )
 						}
+						customValidation={ ( inputObject: HTMLInputElement ) =>
+							customValidationHandler(
+								inputObject,
+								field.key,
+								values
+							)
+						}
 						errorMessage={ field.errorMessage }
 						required={ field.required }
 					/>

assets/js/base/components/combobox/index.tsx

@@ -25,7 +25,7 @@ export interface ComboboxProps {
 	autoComplete?: string;
 	className?: string;
 	errorId: string | null;
-	errorMessage?: string;
+	errorMessage?: string | undefined;
 	id: string;
 	instanceId?: string;
 	label: string;

assets/js/base/components/state-input/StateInputProps.ts

@@ -7,7 +7,7 @@ export interface StateInputProps {
 	country: string;
 	onChange: ( value: string ) => void;
 	required?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | undefined;
 	errorId?: string;
 }
 

package.json

@@ -251,6 +251,7 @@
 		"dompurify": "^2.4.0",
 		"downshift": "6.1.7",
 		"html-react-parser": "3.0.4",
+		"postcode-validator": "3.7.0",
 		"preact": "^10.11.3",
 		"react-number-format": "4.9.3",
 		"reakit": "1.3.11",

packages/checkout/utils/validation/get-validity-message-for-input.ts

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Converts an input's validityState to a string to display on the frontend.
+ *
+ * This returns custom messages for invalid/required fields. Other error types use defaults from the browser (these
+ * could be implemented in the future but are not currently used by the block checkout).
+ */
+const getValidityMessageForInput = (
+	label: string,
+	inputElement: HTMLInputElement
+): string => {
+	const { valid, customError, valueMissing, badInput, typeMismatch } =
+		inputElement.validity;
+
+	// No errors, or custom error - return early.
+	if ( valid || customError ) {
+		return inputElement.validationMessage;
+	}
+
+	const invalidFieldMessage = sprintf(
+		/* translators: %s field label */
+		__( 'Please enter a valid %s', 'woo-gutenberg-products-block' ),
+		label.toLowerCase()
+	);
+
+	if ( valueMissing || badInput || typeMismatch ) {
+		return invalidFieldMessage;
+	}
+
+	return inputElement.validationMessage || invalidFieldMessage;
+};
+
+export default getValidityMessageForInput;

packages/checkout/utils/validation/index.ts

@@ -1,58 +1,3 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Ensures that a given value contains a string, or throws an error.
- */
-export const mustContain = (
-	value: string,
-	requiredValue: string
-): true | never => {
-	if ( ! value.includes( requiredValue ) ) {
-		throw Error(
-			sprintf(
-				/* translators: %1$s value passed to filter, %2$s : value that must be included. */
-				__(
-					'Returned value must include %1$s, you passed "%2$s"',
-					'woo-gutenberg-products-block'
-				),
-				requiredValue,
-				value
-			)
-		);
-	}
-	return true;
-};
-
-/**
- * Converts an input's validityState to a string to display on the frontend.
- *
- * This returns custom messages for invalid/required fields. Other error types use defaults from the browser (these
- * could be implemented in the future but are not currently used by the block checkout).
- */
-export const getValidityMessageForInput = (
-	label: string,
-	inputElement: HTMLInputElement
-): string => {
-	const { valid, customError, valueMissing, badInput, typeMismatch } =
-		inputElement.validity;
-
-	// No errors, or custom error - return early.
-	if ( valid || customError ) {
-		return inputElement.validationMessage;
-	}
-
-	const invalidFieldMessage = sprintf(
-		/* translators: %s field label */
-		__( 'Please enter a valid %s', 'woo-gutenberg-products-block' ),
-		label.toLowerCase()
-	);
-
-	if ( valueMissing || badInput || typeMismatch ) {
-		return invalidFieldMessage;
-	}
-
-	return inputElement.validationMessage || invalidFieldMessage;
-};
+export { default as mustContain } from './must-contain';
+export { default as getValidityMessageForInput } from './get-validity-message-for-input';
+export { default as isPostcode } from './is-postcode';

packages/checkout/utils/validation/is-postcode.ts

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { POSTCODE_REGEXES } from 'postcode-validator/lib/cjs/postcode-regexes.js';
+
+const CUSTOM_REGEXES = new Map< string, RegExp >( [
+	[ 'BA', /^([7-8]{1})([0-9]{4})$/ ],
+	[
+		'GB',
+		/^([A-Z]){1}([0-9]{1,2}|[A-Z][0-9][A-Z]|[A-Z][0-9]{2}|[A-Z][0-9]|[0-9][A-Z]){1}([ ])?([0-9][A-Z]{2}){1}|BFPO(?:\s)?([0-9]{1,4})$|BFPO(c\/o[0-9]{1,3})$/i,
+	],
+	[ 'IN', /^[1-9]{1}[0-9]{2}\s{0,1}[0-9]{3}$/ ],
+	[ 'JP', /^([0-9]{3})([-]?)([0-9]{4})$/ ],
+	[ 'LI', /^(94[8-9][0-9])$/ ],
+	[ 'NL', /^([1-9][0-9]{3})(\s?)(?!SA|SD|SS)[A-Z]{2}$/i ],
+	[ 'SI', /^([1-9][0-9]{3})$/ ],
+] );
+
+const DEFAULT_REGEXES = new Map< string, RegExp >( [
+	...POSTCODE_REGEXES,
+	...CUSTOM_REGEXES,
+] );
+
+export interface IsPostcodeProps {
+	postcode: string;
+	country: string;
+}
+
+const isPostcode = ( { postcode, country }: IsPostcodeProps ): boolean => {
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	return DEFAULT_REGEXES.get( country )!.test( postcode );
+};
+
+export default isPostcode;

packages/checkout/utils/validation/must-contain.ts

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Ensures that a given value contains a string, or throws an error.
+ */
+const mustContain = ( value: string, requiredValue: string ): true | never => {
+	if ( ! value.includes( requiredValue ) ) {
+		throw Error(
+			sprintf(
+				/* translators: %1$s value passed to filter, %2$s : value that must be included. */
+				__(
+					'Returned value must include %1$s, you passed "%2$s"',
+					'woo-gutenberg-products-block'
+				),
+				requiredValue,
+				value
+			)
+		);
+	}
+	return true;
+};
+
+export default mustContain;