Updating ‘Enter Purchase Number’ field in the checkout

The code to make the  ‘Enter Purchase Number’ field in the checkout as mandatory and to remove the optional text from the section. If the field is not filled and try to continue the page an error message needed to be shown.

	_.extend(OrderWizardModulePaymentMethodPurchaseNumber.prototype, {
					template:jj_order_wizard_paymentmethod_purchasenumber_module_tpl,
					submit: function() {
						const purchase_order_number = this.$('[name=purchase-order-number]').val() || '';
						const purchaseHistoryErrorMessage = document.getElementById('purchase-history-error-message');
				
						if (purchase_order_number.trim() === '') {
							purchaseHistoryErrorMessage.innerHTML = 'Purchase Order Number is mandatory. Please fill it.';
							return jQuery.Deferred().reject(); // Prevent form submission
						} else {
							purchaseHistoryErrorMessage.innerHTML = ''; // Clear the error message
							this.wizard.model.set('purchasenumber', purchase_order_number);
							return jQuery.Deferred().resolve(); // Allow form submission
						}
					}
				});

<div class="order-wizard-paymentmethod-purchasenumber-module">
	<h3 class="order-wizard-paymentmethod-purchasenumber-module-title">
		{{translate 'Purchase Order Number'}}
	 </h3>
	<div class="order-wizard-paymentmethod-purchasenumber-module-row" >
		<label for="purchase-order-number" id="order-wizard-paymentmethod-purchasenumber" class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-label">
			{{translate 'Enter Purchase Order Number'}} <span class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-optional"> {{ translate '(Required)' }} </span>
		</label>
		<input
			type="text"
			name="purchase-order-number"
			id="purchase-order-number"
			class="order-wizard-paymentmethod-purchasenumber-module-purchase-order-value"
			value="{{purchaseNumber}}"
		>
	</div>
	<!-- Add the error message container -->
    <div id="purchase-history-error-message" class="order-wizard-paymentmethod-purchasenumber-error-message"></div>
</div>

{{!----
The context variables for this template are not currently documented. Use the {{log this}} helper to view the context variables in the Console of your browser's developer tools.

----}}