Alerting: Fix optional fields requiring validation rule (#84584)

fixes #84296

public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx

@@ -122,7 +122,8 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
           {...register(name, {
             required: determineRequired(option, getValues, pathIndex),
             validate: {
-              validationRule: (v) => (option.validationRule ? validateOption(v, option.validationRule) : true),
+              validationRule: (v) =>
+                option.validationRule ? validateOption(v, option.validationRule, option.required) : true,
               customValidator: (v) => (customValidator ? customValidator(v) : true),
             },
             setValueAs: option.setValueAs,
@@ -167,7 +168,8 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
             rules={{
               required: option.required ? 'Option is required' : false,
               validate: {
-                validationRule: (v) => (option.validationRule ? validateOption(v, option.validationRule) : true),
+                validationRule: (v) =>
+                  option.validationRule ? validateOption(v, option.validationRule, option.required) : true,
                 customValidator: (v) => (customValidator ? customValidator(v) : true),
               },
             }}
@@ -183,7 +185,8 @@ const OptionInput: FC<Props & { id: string; pathIndex?: string }> = ({
           placeholder={option.placeholder}
           {...register(name, {
             required: option.required ? 'Required' : false,
-            validate: (v) => (option.validationRule !== '' ? validateOption(v, option.validationRule) : true),
+            validate: (v) =>
+              option.validationRule !== '' ? validateOption(v, option.validationRule, option.required) : true,
           })}
         />
       );
@@ -223,7 +226,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-const validateOption = (value: string, validationRule: string) => {
+const validateOption = (value: string, validationRule: string, required: boolean) => {
+  if (value === '' && !required) {
+    return true;
+  }
+
   return RegExp(validationRule).test(value) ? true : 'Invalid format';
 };