Fix - Not being able to create new subscription on safari (#1321)

Co-authored-by: Prajjwal Poudel <iamprazol@gmail.com>

Author: MILAN88888

assets/js/modules/membership/admin/subscription.js

@@ -23,6 +23,49 @@
 	var selectedPlanData = null;
 	var billingCycleValue = null;
 
+	// Validate required fields manually. The forms use `novalidate` so the
+	// browser never tries to focus a hidden required control (which throws
+	// "An invalid form control ... is not focusable" and silently aborts the
+	// submit in Safari). We still must enforce required fields ourselves so a
+	// recurring/paid plan can't be saved without a start/expiry date.
+	function validateRequiredFields($form) {
+		var firstInvalid = null;
+
+		$form.find("[required]").each(function () {
+			var $field = $(this);
+			var value = $field.val();
+
+			if (value === null || $.trim(String(value)) === "") {
+				$field.addClass("ur-field-invalid");
+				if (!firstInvalid) {
+					firstInvalid = $field;
+				}
+			} else {
+				$field.removeClass("ur-field-invalid");
+			}
+		});
+
+		if (firstInvalid) {
+			if (snackbar) {
+				snackbar.add({
+					type: "failed",
+					message:
+						ur_subscription_data.i18n_required_fields ||
+						"Please fill in all required fields.",
+					duration: 5
+				});
+			}
+			// Only focus the field if it is actually visible, to avoid the
+			// same "not focusable" error we are guarding against.
+			if (firstInvalid.is(":visible")) {
+				firstInvalid.trigger("focus");
+			}
+			return false;
+		}
+
+		return true;
+	}
+
 	function updatePlanFields(plan) {
 		if (!plan || !plan.meta_value) {
 			return;
@@ -189,6 +232,11 @@
 		"submit",
 		function (e) {
 			e.preventDefault();
+
+			if (!validateRequiredFields($(this))) {
+				return;
+			}
+
 			var $btn = $(
 				'button[form="ur-membership-subscription-create-form"]'
 			);
@@ -240,6 +288,11 @@
 		"submit",
 		function (e) {
 			e.preventDefault();
+
+			if (!validateRequiredFields($(this))) {
+				return;
+			}
+
 			var $btn = $('button[form="ur-membership-subscription-edit-form"]');
 
 			$btn.prop("disabled", true).append(

assets/js/modules/membership/admin/subscription.min.js

@@ -155,6 +155,7 @@ public function enqueue_scripts_styles() {
 				'i18n_update_success'            => __( 'Subscription updated successfully.', 'user-registration' ),
 				'i18n_error'                     => __( 'An error occurred. Please try again.', 'user-registration' ),
 				'i18n_network_error'             => __( 'Network error. Please check your connection.', 'user-registration' ),
+				'i18n_required_fields'           => __( 'Please fill in all required fields.', 'user-registration' ),
 				'payment_gateways'               => get_option( 'ur_membership_payment_gateways', array() ),
 				'i18n_prompt_delete_title'       => __( 'Delete Subscription', 'user-registration' ),
 				'i18n_prompt_delete_description' => __( 'Are you sure you want to delete this subscription?', 'user-registration' ),

modules/membership/includes/Admin/Subscriptions/Subscriptions.php

@@ -39,7 +39,7 @@ class="button-primary ur-subscription-create-btn">
 
 <div class="ur-membership">
 	<div class="ur-membership-tab-contents-wrapper ur-subscription">
-		<form id="ur-membership-subscription-create-form" method="post"
+		<form id="ur-membership-subscription-create-form" method="post" novalidate
 			class="ur-membership-subscription-create-form ur-subscription__form">
 			<?php do_action( 'ur_membership_subscription_create_form_start' ); ?>
 			<div class="user-registration-card">

modules/membership/includes/Admin/Views/subscription-create.php

@@ -176,7 +176,7 @@ class="button-primary ur-subscription-update-btn">
 
 <div class="ur-membership">
 	<div class="ur-membership-tab-contents-wrapper ur-subscription">
-		<form id="ur-membership-subscription-edit-form" method="post" class="ur-subscription__form">
+		<form id="ur-membership-subscription-edit-form" method="post" novalidate class="ur-subscription__form">
 			<?php do_action( 'ur_membership_subscription_edit_form_start', $subscription ); ?>
 			<?php wp_nonce_field( 'ur_membership_subscription', 'security' ); ?>
 			<input type="hidden" name="id" value="<?php echo esc_attr( $subscription['ID'] ); ?>">