diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
index e8a79e091f4..57cad1a84c6 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
@@ -37,7 +37,7 @@ export function ChannelSubForm<R extends ChannelValues>({
 }: Props<R>): JSX.Element {
   const styles = useStyles2(getStyles);
   const name = (fieldName: string) => `${pathPrefix}${fieldName}`;
-  const { control, watch, register } = useFormContext();
+  const { control, watch, register, trigger, formState } = useFormContext();
   const selectedType = watch(name('type')) ?? defaultValues.type; // nope, setting "default" does not work at all.
   const { loading: testingReceiver } = useUnifiedAlertingSelector((state) => state.testReceivers);
 
@@ -66,6 +66,15 @@ export function ChannelSubForm<R extends ChannelValues>({
     [notifiers]
   );
 
+  const handleTest = async () => {
+    await trigger();
+    const isValid = Object.keys(formState.errors).length === 0;
+
+    if (isValid && onTest) {
+      onTest();
+    }
+  };
+
   const notifier = notifiers.find(({ type }) => type === selectedType);
   // if there are mandatory options defined, optional options will be hidden by a collapse
   // if there aren't mandatory options, all options will be shown without collapse
@@ -105,7 +114,7 @@ export function ChannelSubForm<R extends ChannelValues>({
                 size="xs"
                 variant="secondary"
                 type="button"
-                onClick={() => onTest()}
+                onClick={() => handleTest()}
                 icon={testingReceiver ? 'fa fa-spinner' : 'message'}
               >
                 Test