Adding readout for Valid widget

IPython/html/static/widgets/js/widget_bool.js

@@ -155,8 +155,8 @@ define([
             /**
              * Called when view is rendered.
              */
-            this.$el.addClass("fa widget-valid");
-            this.model.on("change:value", this.update, this);
+            this.$el.addClass("widget-valid");
+            this.model.on("change", this.update, this);
             this.update();
         },
         update: function() {
@@ -166,17 +166,21 @@ define([
              * Called when the model is changed.  The model may have been
              * changed by another view or by a state update from the back-end.
              */
+            var icon, color, readout;
             if (this.model.get("value")) {
-                this.$el.removeClass("fa-close").addClass("fa-check");
-                this.after_displayed(function() {
-                    this.$el.css("color", "green");
-                }, this);
+                icon = "fa-check";
+                color = "green";
+                readout = "";
             } else {
-                this.$el.removeClass("fa-check").addClass("fa-close");
-                this.after_displayed(function() {
-                    this.$el.css("color", "red");
-                }, this);
-            }
+                icon = "fa-close";
+                color = "red";
+                readout = this.model.get("readout");
+            } 
+            this.$el.text(readout);
+            $('<i class="fa"></i>').prependTo(this.$el).addClass(icon);
+            this.after_displayed(function() {
+                this.$el.css("color", color);
+            }, this);
         }
     });
 

IPython/html/widgets/widget_bool.py

@@ -81,6 +81,7 @@ class Valid(_Bool):
     value: {True,False}
         value of the Valid widget
 """
+    readout = Unicode(help="Message displayed when the value is False", sync=True)
     _view_name = Unicode('ValidView', sync=True)
 
 # Remove in IPython 4.0