diff --git a/spec/javascripts/fixtures/new_branch.html.haml b/spec/javascripts/fixtures/new_branch.html.haml
new file mode 100644
index 00000000000..f06629e5ecc
--- /dev/null
+++ b/spec/javascripts/fixtures/new_branch.html.haml
@@ -0,0 +1,4 @@
+%form.js-create-branch-form
+  %input.js-branch-name
+  .js-branch-name-error
+  %input{id: "ref"}
diff --git a/spec/javascripts/new_branch_spec.js.coffee b/spec/javascripts/new_branch_spec.js.coffee
new file mode 100644
index 00000000000..1cba9546655
--- /dev/null
+++ b/spec/javascripts/new_branch_spec.js.coffee
@@ -0,0 +1,155 @@
+#= require jquery.ui.all
+#= require new_branch_form
+
+describe 'Branch', ->
+  describe 'create a new branch', ->
+    fixture.preload('new_branch.html')
+
+    beforeEach ->
+      fixture.load('new_branch.html')
+      $('form').on 'submit', (e) -> e.preventDefault()
+
+      @form = new NewBranchForm($('.js-create-branch-form'), [])
+      @name = $('.js-branch-name')
+
+    it "can't start with a dot", ->
+      @name.val('.foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't start with '.'")
+
+    it "can't start with a slash", ->
+      @name.val('/foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't start with '/'")
+
+    it "can't have two consecutive dots", ->
+      @name.val('foo..bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '..'")
+
+    it "can't have spaces anywhere", ->
+      @name.val(' foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains spaces")
+      @name.val('foo bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains spaces")
+      @name.val('foo ').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains spaces")
+
+    it "can't have ~ anywhere", ->
+      @name.val('~foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '~'")
+      @name.val('foo~bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '~'")
+      @name.val('foo~').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '~'")
+
+    it "can't have tilde anwhere", ->
+      @name.val('~foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '~'")
+      @name.val('foo~bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '~'")
+      @name.val('foo~').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '~'")
+
+    it "can't have caret anywhere", ->
+      @name.val('^foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '^'")
+      @name.val('foo^bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '^'")
+      @name.val('foo^').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '^'")
+
+    it "can't have : anywhere", ->
+      @name.val(':foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains ':'")
+      @name.val('foo:bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains ':'")
+      @name.val(':foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains ':'")
+
+    it "can't have question mark anywhere", ->
+      @name.val('?foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '?'")
+      @name.val('foo?bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '?'")
+      @name.val('foo?').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '?'")
+
+    it "can't have asterisk anywhere", ->
+      @name.val('*foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '*'")
+      @name.val('foo*bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '*'")
+      @name.val('foo*').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '*'")
+
+    it "can't have open bracket anywhere", ->
+      @name.val('[foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '['")
+      @name.val('foo[bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '['")
+      @name.val('foo[').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '['")
+
+    it "can't have a backslash anywhere", ->
+      @name.val('\\foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '\\'")
+      @name.val('foo\\bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '\\'")
+      @name.val('foo\\').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '\\'")
+
+    it "can't contain a sequence @{ anywhere", ->
+      @name.val('@{foo').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '@{'")
+      @name.val('foo@{bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '@{'")
+      @name.val('foo@{').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '@{'")
+
+    it "can't have consecutive slashes", ->
+      @name.val('foo//bar').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains consecutive slashes")
+
+    it "can't end with a slash", ->
+      @name.val('foo/').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't end in '/'")
+
+    it "can't end with a dot", ->
+      @name.val('foo.').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't end in '.'")
+
+    it "can't end with .lock", ->
+      @name.val('foo.lock').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't end in '.lock'")
+
+    it "can't be the single character @", ->
+      @name.val('@').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't be '@'")
+
+    it "concatenates all error messages", ->
+      @name.val('/foo bar?~.').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't start with '/', can't contains spaces, '?', '~', can't end in '.'")
+
+    it "doesn't duplicate error messages", ->
+      @name.val('?foo?bar?zoo?').trigger('blur')
+      expect($('.js-branch-name-error span').text()).toEqual("can't contains '?'")
+
+    it "removes the error message when is a valid name", ->
+      @name.val('foo?bar').trigger('blur')
+      expect($('.js-branch-name-error span').length).toEqual(1)
+      @name.val('foobar').trigger('blur')
+      expect($('.js-branch-name-error span').length).toEqual(0)
+
+    it "can have dashes anywhere", ->
+      @name.val('-foo-bar-zoo-').trigger('blur')
+      expect($('.js-branch-name-error span').length).toEqual(0)
+
+    it "can have underscores anywhere", ->
+      @name.val('_foo_bar_zoo_').trigger('blur')
+      expect($('.js-branch-name-error span').length).toEqual(0)
+
+    it "can have numbers anywhere", ->
+      @name.val('1foo2bar3zoo4').trigger('blur')
+      expect($('.js-branch-name-error span').length).toEqual(0)
+
+    it "can be only letters", ->
+      @name.val('foo').trigger('blur')
+      expect($('.js-branch-name-error span').length).toEqual(0)