check required on add

previsouly was checked on key down, but that does the check too soon.
Next attempt was on blur, but that had numerous problems.  This now checkes when the add button is clicked.
works for entity_select widget, too
Checks upon form submission

https://fedorahosted.org/freeipa/ticket/1437

3 files changed, 46 insertions, 37 deletions

diff --git a/install/ui/add.js b/install/ui/add.js
index 50b6124c0..0a414b74b 100644
--- a/install/ui/add.js
+++ b/install/ui/add.js
@@ -118,11 +118,14 @@ IPA.add_dialog = function (spec) {
         for (var i=0; i<fields.length; i++) {
             fields[i].validate();
         }
-
+        var required_fields_filled = true;
         for (i=0; i<fields.length; i++) {
             field = fields[i];
             if (!field.valid) return;
 
+            required_fields_filled = field.check_required() &&
+                required_fields_filled;
+
             value = record[field.name];
             if (!value) continue;
 
@@ -141,6 +144,8 @@ IPA.add_dialog = function (spec) {
             for (var k=0; k<section_fields.length; k++) {
                 field = section_fields[k];
                 if (!field.valid) return;
+                required_fields_filled = field.check_required()  &&
+                    required_fields_filled;
 
                 value = record[field.name];
                 if (!value) continue;
@@ -155,7 +160,9 @@ IPA.add_dialog = function (spec) {
 
         //alert(JSON.stringify(command.to_json()));
 
-        command.execute();
+        if (required_fields_filled){
+            command.execute();
+        }
     };
 
     that.add_dialog_init = that.init;
diff --git a/install/ui/service.js b/install/ui/service.js
index 6fcd43482..943995a22 100644
--- a/install/ui/service.js
+++ b/install/ui/service.js
@@ -110,6 +110,7 @@ IPA.service_add_dialog = function(spec) {
     var that = IPA.add_dialog(spec).
         field(IPA.widget({
             name: 'krbprincipalname',
+            optional:true,
             hidden: true
         })).
         field(IPA.service_select_widget({
diff --git a/install/ui/widget.js b/install/ui/widget.js
index 9142a26a9..0ec9a968b 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -107,27 +107,39 @@ IPA.widget = function(spec) {
         }
 
     }
+    that.create_error_link = function(container){
+        container.append(' ');
 
-    /*returns true and clears the error message if the field value  passes
-      the validation pattern.  If the field value does not pass validation,
-      displays the error message and returns false. */
-    that.validate = function() {
-
-        that.hide_error();
-
-        that.valid = true;
+        $('<span/>', {
+            name: 'error_link',
+            html: IPA.messages.widget.validation.error,
+            'class': 'ui-state-error ui-corner-all',
+            style: 'display:none'
+        }).appendTo(container);
+    };
 
+    that.check_required = function(){
         var values = that.save();
-        if (!values || !values.length) {
+        if (!values || !values.length || values[0] === '' ) {
             if (that.param_info &&
                 that.param_info.required &&
                 !that.optional) {
                 that.valid = false;
                 that.show_error(IPA.messages.widget.validation.required);
+                return false;
             }
-            return;
         }
+        return true;
+    };
 
+    /*returns true and clears the error message if the field value  passes
+      the validation pattern.  If the field value does not pass validation,
+      displays the error message and returns false. */
+    that.validate = function() {
+        hide_error();
+        that.valid = true;
+
+        var values = that.save();
         var value = values[0];
         if (!value) {
             return;
@@ -319,10 +331,10 @@ IPA.widget = function(spec) {
         error_link.css('display', 'block');
     };
 
-    that.hide_error = function() {
+    function hide_error() {
         var error_link = that.get_error_link();
         error_link.css('display', 'none');
-    };
+    }
 
     that.set_enabled = function() {
     };
@@ -371,6 +383,7 @@ IPA.text_widget = function(spec) {
         IPA.select_range(that.input, start, end);
     };
 
+
     that.create = function(container) {
 
         $('<label/>', {
@@ -391,14 +404,7 @@ IPA.text_widget = function(spec) {
             that.create_undo(container);
         }
 
-        container.append(' ');
-
-        $('<span/>', {
-            name: 'error_link',
-            html: IPA.messages.widget.validation.error,
-            'class': 'ui-state-error ui-corner-all',
-            style: 'display:none'
-        }).appendTo(container);
+        that.create_error_link(container);
     };
 
     that.setup = function(container) {
@@ -546,14 +552,7 @@ IPA.multivalued_text_widget = function(spec) {
             that.create_undo(div);
         }
 
-        div.append(' ');
-
-        $('<span/>', {
-            name: 'error_link',
-            html: IPA.messages.widget.validation.error,
-            'class': 'ui-state-error ui-corner-all',
-            style: 'display:none'
-        }).appendTo(div);
+        that.create_error_link(container);
 
         $('<a/>', {
             name: 'add',
@@ -1079,12 +1078,8 @@ IPA.textarea_widget = function (spec) {
             that.create_undo(container);
         }
 
-        $("<span/>",{
-            name:'error_link',
-            html: IPA.messages.widget.validation.error,
-            "class":"ui-state-error ui-corner-all",
-            style:"display:none"
-        }).appendTo(container);
+        that.create_error_link(container);
+
     };
 
     that.setup = function(container) {
@@ -1650,7 +1645,10 @@ IPA.entity_select_widget = function(spec) {
         if (editable){
             that.edit_box = $('<input />',{
                 type: 'text',
-                title: that.tooltip
+                title: that.tooltip,
+                keyup:function(){
+                    that.validate();
+                }
             });
 
             $('<div style:"display=block;" />').
@@ -1658,9 +1656,12 @@ IPA.entity_select_widget = function(spec) {
                 appendTo(container);
         }
 
+        that.create_error_link(container);
+
         that.entity_select = $('<select/>', {
             id: that.name + '-entity-select',
             change: function(){
+                that.validate();
                 if (editable){
                     that.edit_box.val(
                         $('option:selected', that.entity_select).val());