diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx index 02384e0c63c..e5058dca9b9 100644 --- a/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/fields/OptionField.tsx @@ -122,7 +122,8 @@ const OptionInput: FC = ({ {...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 = ({ 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 = ({ 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'; };