diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 34383cb8ada706ddaa3dcb1e066ab245b3ebb79e..ed540303b0ad6fe5055d199562ee84f77cb82866 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -26,22 +26,22 @@ export default class NewBranchForm {
   setupRestrictions() {
     const startsWith = {
       pattern: /^(\/|\.)/g,
-      prefix: "can't start with",
+      prefix: 'Branch name cannot start with',
       conjunction: 'or',
     };
     const endsWith = {
       pattern: /(\/|\.|\.lock)$/g,
-      prefix: "can't end in",
+      prefix: 'Branch name cannot end in',
       conjunction: 'or',
     };
     const invalid = {
       pattern: /(\s|~|\^|:|\?|\*|\[|\\|\.\.|@\{|\/{2,}){1}/g,
-      prefix: "can't contain",
-      conjunction: ', ',
+      prefix: 'Branch name cannot contain',
+      conjunction: ' or ',
     };
     const single = {
       pattern: /^@+$/g,
-      prefix: "can't be",
+      prefix: 'Branch name cannot be',
       conjunction: 'or',
     };
     return (this.restrictions = [startsWith, invalid, endsWith, single]);
@@ -79,7 +79,7 @@ export default class NewBranchForm {
     };
     const errors = this.restrictions.reduce(validator, []);
     if (errors.length > 0) {
-      this.branchNameError.textContent = errors.join(', ');
+      this.branchNameError.textContent = errors.join('. ');
       this.name.classList.add(NAME_ERROR_CLASS);
       this.name.focus();
     } else {
diff --git a/spec/features/projects/branches/user_creates_branch_spec.rb b/spec/features/projects/branches/user_creates_branch_spec.rb
index 0260f1359e06e6103d04aacd4c9709f450a67ed7..410638541dbc43cd92d276d722f0d6ccceaacdc9 100644
--- a/spec/features/projects/branches/user_creates_branch_spec.rb
+++ b/spec/features/projects/branches/user_creates_branch_spec.rb
@@ -108,7 +108,7 @@
             click_button("Create branch")
 
             expect(page).to have_content('Branch name is invalid')
-            expect(page).to have_content("can't contain spaces")
+            expect(page).to have_content("Branch name cannot contain spaces")
             expect(page).to have_selector('.js-branch-name.gl-border-red-500')
           end
         end
diff --git a/spec/frontend/new_branch_spec.js b/spec/frontend/new_branch_spec.js
index baff5ebfdb86c8807fa6814e4d6239fa4a6897e2..eb37cf15b8c5f33708ad7873be6393e53c4e566e 100644
--- a/spec/frontend/new_branch_spec.js
+++ b/spec/frontend/new_branch_spec.js
@@ -32,142 +32,144 @@ describe('Branch', () => {
 
     it("can't start with a dot", () => {
       fillNameWith('.foo');
-      expectToHaveError("can't start with '.'");
+      expectToHaveError("Branch name cannot start with '.'");
     });
 
     it("can't start with a slash", () => {
       fillNameWith('/foo');
-      expectToHaveError("can't start with '/'");
+      expectToHaveError("Branch name cannot start with '/'");
     });
 
     it("can't have two consecutive dots", () => {
       fillNameWith('foo..bar');
-      expectToHaveError("can't contain '..'");
+      expectToHaveError("Branch name cannot contain '..'");
     });
 
     it("can't have spaces anywhere", () => {
       fillNameWith(' foo');
-      expectToHaveError("can't contain spaces");
+      expectToHaveError('Branch name cannot contain spaces');
       fillNameWith('foo bar');
-      expectToHaveError("can't contain spaces");
+      expectToHaveError('Branch name cannot contain spaces');
       fillNameWith('foo ');
-      expectToHaveError("can't contain spaces");
+      expectToHaveError('Branch name cannot contain spaces');
     });
 
     it("can't have ~ anywhere", () => {
       fillNameWith('~foo');
-      expectToHaveError("can't contain '~'");
+      expectToHaveError("Branch name cannot contain '~'");
       fillNameWith('foo~bar');
-      expectToHaveError("can't contain '~'");
+      expectToHaveError("Branch name cannot contain '~'");
       fillNameWith('foo~');
-      expectToHaveError("can't contain '~'");
+      expectToHaveError("Branch name cannot contain '~'");
     });
 
     it("can't have tilde anwhere", () => {
       fillNameWith('~foo');
-      expectToHaveError("can't contain '~'");
+      expectToHaveError("Branch name cannot contain '~'");
       fillNameWith('foo~bar');
-      expectToHaveError("can't contain '~'");
+      expectToHaveError("Branch name cannot contain '~'");
       fillNameWith('foo~');
-      expectToHaveError("can't contain '~'");
+      expectToHaveError("Branch name cannot contain '~'");
     });
 
     it("can't have caret anywhere", () => {
       fillNameWith('^foo');
-      expectToHaveError("can't contain '^'");
+      expectToHaveError("Branch name cannot contain '^'");
       fillNameWith('foo^bar');
-      expectToHaveError("can't contain '^'");
+      expectToHaveError("Branch name cannot contain '^'");
       fillNameWith('foo^');
-      expectToHaveError("can't contain '^'");
+      expectToHaveError("Branch name cannot contain '^'");
     });
 
     it("can't have : anywhere", () => {
       fillNameWith(':foo');
-      expectToHaveError("can't contain ':'");
+      expectToHaveError("Branch name cannot contain ':'");
       fillNameWith('foo:bar');
-      expectToHaveError("can't contain ':'");
+      expectToHaveError("Branch name cannot contain ':'");
       fillNameWith(':foo');
-      expectToHaveError("can't contain ':'");
+      expectToHaveError("Branch name cannot contain ':'");
     });
 
     it("can't have question mark anywhere", () => {
       fillNameWith('?foo');
-      expectToHaveError("can't contain '?'");
+      expectToHaveError("Branch name cannot contain '?'");
       fillNameWith('foo?bar');
-      expectToHaveError("can't contain '?'");
+      expectToHaveError("Branch name cannot contain '?'");
       fillNameWith('foo?');
-      expectToHaveError("can't contain '?'");
+      expectToHaveError("Branch name cannot contain '?'");
     });
 
     it("can't have asterisk anywhere", () => {
       fillNameWith('*foo');
-      expectToHaveError("can't contain '*'");
+      expectToHaveError("Branch name cannot contain '*'");
       fillNameWith('foo*bar');
-      expectToHaveError("can't contain '*'");
+      expectToHaveError("Branch name cannot contain '*'");
       fillNameWith('foo*');
-      expectToHaveError("can't contain '*'");
+      expectToHaveError("Branch name cannot contain '*'");
     });
 
     it("can't have open bracket anywhere", () => {
       fillNameWith('[foo');
-      expectToHaveError("can't contain '['");
+      expectToHaveError("Branch name cannot contain '['");
       fillNameWith('foo[bar');
-      expectToHaveError("can't contain '['");
+      expectToHaveError("Branch name cannot contain '['");
       fillNameWith('foo[');
-      expectToHaveError("can't contain '['");
+      expectToHaveError("Branch name cannot contain '['");
     });
 
     it("can't have a backslash anywhere", () => {
       fillNameWith('\\foo');
-      expectToHaveError("can't contain '\\'");
+      expectToHaveError("Branch name cannot contain '\\'");
       fillNameWith('foo\\bar');
-      expectToHaveError("can't contain '\\'");
+      expectToHaveError("Branch name cannot contain '\\'");
       fillNameWith('foo\\');
-      expectToHaveError("can't contain '\\'");
+      expectToHaveError("Branch name cannot contain '\\'");
     });
 
-    it("can't contain a sequence @{ anywhere", () => {
+    it('Branch name cannot contain a sequence @{ anywhere', () => {
       fillNameWith('@{foo');
-      expectToHaveError("can't contain '@{'");
+      expectToHaveError("Branch name cannot contain '@{'");
       fillNameWith('foo@{bar');
-      expectToHaveError("can't contain '@{'");
+      expectToHaveError("Branch name cannot contain '@{'");
       fillNameWith('foo@{');
-      expectToHaveError("can't contain '@{'");
+      expectToHaveError("Branch name cannot contain '@{'");
     });
 
     it("can't have consecutive slashes", () => {
       fillNameWith('foo//bar');
-      expectToHaveError("can't contain consecutive slashes");
+      expectToHaveError('Branch name cannot contain consecutive slashes');
     });
 
     it("can't end with a slash", () => {
       fillNameWith('foo/');
-      expectToHaveError("can't end in '/'");
+      expectToHaveError("Branch name cannot end in '/'");
     });
 
     it("can't end with a dot", () => {
       fillNameWith('foo.');
-      expectToHaveError("can't end in '.'");
+      expectToHaveError("Branch name cannot end in '.'");
     });
 
     it("can't end with .lock", () => {
       fillNameWith('foo.lock');
-      expectToHaveError("can't end in '.lock'");
+      expectToHaveError("Branch name cannot end in '.lock'");
     });
 
     it("can't be the single character @", () => {
       fillNameWith('@');
-      expectToHaveError("can't be '@'");
+      expectToHaveError("Branch name cannot be '@'");
     });
 
     it('concatenates all error messages', () => {
       fillNameWith('/foo bar?~.');
-      expectToHaveError("can't start with '/', can't contain spaces, '?', '~', can't end in '.'");
+      expectToHaveError(
+        "Branch name cannot start with '/'. Branch name cannot contain spaces or '?' or '~'. Branch name cannot end in '.'",
+      );
     });
 
     it("doesn't duplicate error messages", () => {
       fillNameWith('?foo?bar?zoo?');
-      expectToHaveError("can't contain '?'");
+      expectToHaveError("Branch name cannot contain '?'");
     });
 
     it('removes the error message when is a valid name', () => {