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 50b6124..0a414b7 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 6fcd434..943995a 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 9142a26..0ec9a96 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());