diff --git a/app/assets/javascripts/admin/document_publishing.js b/app/assets/javascripts/admin/document_publishing.js
new file mode 100644
index 00000000000..f2ef80ed5dc
--- /dev/null
+++ b/app/assets/javascripts/admin/document_publishing.js
@@ -0,0 +1,30 @@
+(function ($) {
+  var _enableChangeNoteHighlighting = function() {
+    var form = $(this);
+    var changeNoteLabels = form.find("label[for=document_change_note]");
+    var changeNoteTextareas = form.find("textarea#document_change_note");
+    var changeNoteElements = changeNoteLabels.add(changeNoteTextareas);
+
+    if ((changeNoteLabels.length > 0) && (changeNoteTextareas.length > 0)) {
+      var buttonValue = form.find("input[type=submit]")[0].value;
+      var publishButtonLink = $("<a/>").text(buttonValue).addClass("button").attr("href", "#document_publishing");
+
+      publishButtonLink.click(function() {
+        publishButtonLink.hide();
+        $(changeNoteElements).wrap($("<div class='field_with_errors' />"));
+        form.show();
+      });
+
+      form.hide();
+      form.before(publishButtonLink);
+    };
+  }
+
+  $.fn.extend({
+    enableChangeNoteHighlighting: _enableChangeNoteHighlighting
+  });
+})(jQuery);
+
+jQuery(function($) {
+  $("#document_publishing").enableChangeNoteHighlighting();
+})
\ No newline at end of file
diff --git a/app/helpers/admin/document_actions_helper.rb b/app/helpers/admin/document_actions_helper.rb
index 53b47266641..16dcca16afb 100644
--- a/app/helpers/admin/document_actions_helper.rb
+++ b/app/helpers/admin/document_actions_helper.rb
@@ -21,7 +21,7 @@ def publish_document_form(document, options = {})
     button_title = "Publish #{document.title}"
     confirm = publish_document_alerts(document, options[:force])
     capture do
-      form_for [:admin, document], {as: :document, url: url, method: :post} do |form|
+      form_for [:admin, document], {as: :document, url: url, method: :post, html: {id: "document_publishing"}} do |form|
         concat(form.hidden_field :lock_version)
         concat(form.text_area :change_note, rows: 4) if document.change_note_required?
         concat(form.submit button_text, title: button_title, confirm: confirm)
diff --git a/test/javascripts/document_publishing_test.js b/test/javascripts/document_publishing_test.js
new file mode 100644
index 00000000000..da04d541f14
--- /dev/null
+++ b/test/javascripts/document_publishing_test.js
@@ -0,0 +1,72 @@
+module("No change note label or field present", {
+  setup: function() {
+    this.publishingForm = $("<form />");
+
+    $("#qunit-fixture").append(this.publishingForm);
+    this.publishingForm.enableChangeNoteHighlighting();
+  }
+});
+
+test("should not hide form", function() {
+  ok($(this.publishingForm).is(":visible"));
+});
+
+module("Change note label and field present with publish button", {
+  setup: function() {
+    this.publishingForm = $("<form />");
+    this.changeNoteLabel = $("<label for='document_change_note' />")
+    this.changeNoteTextarea = $("<textarea id='document_change_note' />");
+    this.publishingForm.append(this.changeNoteLabel);
+    this.publishingForm.append(this.changeNoteTextarea);
+    this.publishingForm.append("<input type='submit' value='Publish'/>");
+
+    $("#qunit-fixture").append(this.publishingForm);
+    this.publishingForm.enableChangeNoteHighlighting();
+  }
+});
+
+test("should hide form", function() {
+  ok($(this.publishingForm).is(":hidden"));
+});
+
+test("should insert a publish button link before the form", function() {
+  equal(this.publishingForm.prev("a.button[href='#document_publishing']").text(), "Publish");
+});
+
+test("should hide publish button when the publish button link is clicked", function() {
+  this.publishingForm.prev("a.button").click();
+  ok(this.publishingForm.prev("a.button").is(":hidden"));
+});
+
+test("should wrap change note label in validation error class when the publish button link is clicked", function() {
+  this.publishingForm.prev("a.button").click();
+  ok(this.changeNoteLabel.parents().hasClass("field_with_errors"));
+});
+
+test("should wrap change note textarea in validation error class when the publish button link is clicked", function() {
+  this.publishingForm.prev("a.button").click();
+  ok(this.changeNoteTextarea.parents().hasClass("field_with_errors"));
+});
+
+test("should show form when the publish button link is clicked", function() {
+  this.publishingForm.prev("a.button").click();
+  ok($(this.publishingForm).is(":visible"));
+});
+
+module("Change note label and field present with force publish button", {
+  setup: function() {
+    this.publishingForm = $("<form />");
+    this.changeNoteLabel = $("<label for='document_change_note' />")
+    this.changeNoteTextarea = $("<textarea id='document_change_note' />");
+    this.publishingForm.append(this.changeNoteLabel);
+    this.publishingForm.append(this.changeNoteTextarea);
+    this.publishingForm.append("<input type='submit' value='Force Publish'/>");
+
+    $("#qunit-fixture").append(this.publishingForm);
+    this.publishingForm.enableChangeNoteHighlighting();
+  }
+});
+
+test("should insert a force publish button link before the form", function() {
+  equal(this.publishingForm.prev("a.button[href='#document_publishing']").text(), "Force Publish");
+});
diff --git a/test/javascripts/qunit.js b/test/javascripts/qunit.js
index 6f84c8ed8e2..40708c0fd98 100644
--- a/test/javascripts/qunit.js
+++ b/test/javascripts/qunit.js
@@ -11,4 +11,5 @@
 //= require multiple_file_upload_test
 //= require featured_section_carousel_test
 //= require organisation_contact_form_test
-//= require featured_section_helper_test
\ No newline at end of file
+//= require featured_section_helper_test
+//= require document_publishing_test
\ No newline at end of file