diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
index 2229e3cf4..1eae9715d 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
@@ -1,6 +1,7 @@
 import { EditorType } from '@/react/edge/edge-stacks/types';
 import { PortainerEndpointTypes } from '@/portainer/models/endpoint/models';
 import { getValidEditorTypes } from '@/react/edge/edge-stacks/utils';
+import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 
 export default class CreateEdgeStackViewController {
@@ -38,6 +39,8 @@ export default class CreateEdgeStackViewController {
 
     this.edgeGroups = null;
 
+    $scope.STACK_NAME_VALIDATION_REGEX = STACK_NAME_VALIDATION_REGEX;
+
     this.createStack = this.createStack.bind(this);
     this.validateForm = this.validateForm.bind(this);
     this.createStackByMethod = this.createStackByMethod.bind(this);
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
index 1929f6fea..ecfa4dc84 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
@@ -15,6 +15,7 @@
                 ng-model="$ctrl.formValues.Name"
                 id="stack_name"
                 name="nameField"
+                ng-pattern="$ctrl.formValues.DeploymentType === $ctrl.EditorType.Compose ? STACK_NAME_VALIDATION_REGEX : ''"
                 placeholder="e.g. mystack"
                 auto-focus
                 required
@@ -23,7 +24,14 @@
               <div class="help-block" ng-show="$ctrl.form.$invalid">
                 <div class="small text-warning">
                   <div ng-messages="$ctrl.form.$error">
-                    <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Name is required. </p>
+                    <p ng-message="required" class="vertical-center">
+                      <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
+                      <span>Name is required.</span>
+                    </p>
+                    <p ng-message="pattern" class="vertical-center">
+                      <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
+                      <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
+                    </p>
                   </div>
                 </div>
               </div>
diff --git a/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js b/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js
index 2ed457830..e597bc000 100644
--- a/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js
+++ b/app/portainer/components/stack-duplication-form/stack-duplication-form-controller.js
@@ -1,4 +1,4 @@
-import { STACK_NAME_VALIDATION_REGEX } from '@/constants';
+import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
 
 angular.module('portainer.app').controller('StackDuplicationFormController', [
   'Notifications',
diff --git a/app/portainer/views/stacks/create/createStackController.js b/app/portainer/views/stacks/create/createStackController.js
index 4107a3947..18c3c10a6 100644
--- a/app/portainer/views/stacks/create/createStackController.js
+++ b/app/portainer/views/stacks/create/createStackController.js
@@ -1,7 +1,7 @@
 import angular from 'angular';
 
 import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
-import { STACK_NAME_VALIDATION_REGEX } from '@/constants';
+import { STACK_NAME_VALIDATION_REGEX } from '@/react/constants';
 import { RepositoryMechanismTypes } from '@/kubernetes/models/deploy';
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
diff --git a/app/react/constants.ts b/app/react/constants.ts
index a2a191a11..8f24f73ae 100644
--- a/app/react/constants.ts
+++ b/app/react/constants.ts
@@ -1,3 +1,5 @@
+export const STACK_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
+
 export const BROWSER_OS_PLATFORM = getOs();
 
 function getOs() {