SOL-1225

cms/static/js/certificates/views/signatory_editor.js

@@ -85,8 +85,10 @@ function ($, _, Backbone, gettext,
             if (event && event.preventDefault) { event.preventDefault(); }
             this.model.set(
                 'name',
-                this.$('.signatory-name-input').val()
+                this.$('.signatory-name-input').val(),
+                { silent: true }
             );
+            this.toggleValidationErrorMessage('name');
             this.eventAgg.trigger("onSignatoryUpdated", this.model);
         },
 
@@ -95,8 +97,10 @@ function ($, _, Backbone, gettext,
             if (event && event.preventDefault) { event.preventDefault(); }
             this.model.set(
                 'title',
-                this.$('.signatory-title-input').val()
+                this.$('.signatory-title-input').val(),
+                { silent:true }
             );
+            this.toggleValidationErrorMessage('title');
             this.eventAgg.trigger("onSignatoryUpdated", this.model);
         },
 
@@ -105,7 +109,8 @@ function ($, _, Backbone, gettext,
             if (event && event.preventDefault) { event.preventDefault(); }
             this.model.set(
                 'organization',
-                this.$('.signatory-organization-input').val()
+                this.$('.signatory-organization-input').val(),
+                { silent: true }
             );
             this.eventAgg.trigger("onSignatoryUpdated", this.model);
         },
@@ -178,7 +183,31 @@ function ($, _, Backbone, gettext,
                 }
             });
             modal.show();
+        },
+
+        /**
+         * @desc Toggle the validation error messages. If given model attribute is not valid then show the error message
+         * else remove it.
+         * @param string modelAttribute - the attribute of the signatory model e.g. name, title.
+        */
+        toggleValidationErrorMessage: function(modelAttribute) {
+            var selector = "div.add-signatory-" + modelAttribute;
+            if (!this.model.isValid() && _.has(this.model.validationError, modelAttribute)) {
+
+                // Show the error message if it is not exist before.
+                if( !$(selector).hasClass('error')) {
+                    var errorMessage = this.model.validationError[modelAttribute];
+                    $(selector).addClass("error");
+                    $(selector).append("<span class='message-error'>" + errorMessage + "</span>");
+                }
+            }
+            else {
+                // Remove the error message.
+                $(selector).removeClass("error");
+                $(selector + ">span.message-error").remove();
+            }
         }
+
     });
     return SignatoryEditorView;
 });

common/test/acceptance/tests/studio/test_studio_settings_certificates.py

@@ -208,7 +208,13 @@ class CertificatesTest(StudioCourseTest):
         certificate = self.create_and_verify_certificate(
             "Course Title Override",
             0,
-            [self.make_signatory_data('Signatory title with new line character \n')]
+            [
+                {
+                    'name': 'Signatory Name',
+                    'title': 'Signatory title with new line character \n',
+                    'organization': 'Signatory Organization',
+                }
+            ]
         )
 
         certificate.wait_for_certificate_delete_button()