Added richtext elements to form tests.

app/assets/javascripts/app/controllers/_application_controller_form.js.coffee

@@ -708,7 +708,7 @@ class App.ControllerForm extends App.Controller
     else if attribute.tag is 'richtext'
       item = $( App.view('generic/richtext')( attribute: attribute ) )
       item.find('[contenteditable]').ce(
-        mode: attribute.type
+        mode:      attribute.type
         maxlength: attribute.maxlength
       )
       if attribute.upload
@@ -733,11 +733,11 @@ class App.ControllerForm extends App.Controller
 
               # delete attachment from storage
               App.Ajax.request(
-                type:  'DELETE'
+                type:        'DELETE'
-                url:   App.Config.get('api_path') + '/ticket_attachment_upload'
+                url:         App.Config.get('api_path') + '/ticket_attachment_upload'
-                data:  JSON.stringify( { store_id: store_id } ),
+                data:        JSON.stringify( { store_id: store_id } ),
                 processData: false
-                success: (data, status, xhr) =>
+                success:     (data, status, xhr) =>
               )
 
               # remove attachment from dom
@@ -748,22 +748,23 @@ class App.ControllerForm extends App.Controller
                 element.empty()
           )
 
-        @attachments = []
+        @attachments           = []
-        @progressBar = item.find('.attachmentUpload-progressBar')
+        @progressBar           = item.find('.attachmentUpload-progressBar')
-        @progressText = item.find('.js-percentage')
+        @progressText          = item.find('.js-percentage')
         @attachmentPlaceholder = item.find('.attachmentPlaceholder')
-        @attachmentUpload = item.find('.attachmentUpload')
+        @attachmentUpload      = item.find('.attachmentUpload')
-        @attachmentsHolder = item.find('.attachments')
+        @attachmentsHolder     = item.find('.attachments')
-        @cancelContainer = item.find('.js-cancel')
+        @cancelContainer       = item.find('.js-cancel')
+
         u = => html5Upload.initialize(
-          uploadUrl: App.Config.get('api_path') + '/ticket_attachment_upload',
+          uploadUrl:              App.Config.get('api_path') + '/ticket_attachment_upload',
-          dropContainer: item.closest('form').get(0),
+          dropContainer:          item.closest('form').get(0),
-          cancelContainer: @cancelContainer,
+          cancelContainer:        @cancelContainer,
-          inputField: item.find( 'input' ).get(0),
+          inputField:             item.find( 'input' ).get(0),
-          key: 'File',
+          key:                    'File',
-          data: { form_id: @form_id },
+          data:                   { form_id: @form_id },
           maxSimultaneousUploads: 1,
-          onFileAdded: (file) =>
+          onFileAdded:            (file) =>
 
             file.on(
 
@@ -847,7 +848,6 @@ class App.ControllerForm extends App.Controller
     else if attribute.tag is 'article'
       item = $( App.view('generic/article')( attribute: attribute ) )
 
-
     # tag
     else if attribute.tag is 'tag'
       item = $( App.view('generic/input')( attribute: attribute ) )
@@ -866,9 +866,9 @@ class App.ControllerForm extends App.Controller
       item = $( App.view('generic/autocompletion')( attribute: attribute ) )
 
       a = =>
-        local_attribute = '#' + attribute.id
+        local_attribute      = '#' + attribute.id
         local_attribute_full = '#' + attribute.id + '_autocompletion'
-        @callback = attribute.callback
+        @callback            = attribute.callback
 
         # call calback on init
         if @callback && attribute.value && @params
@@ -939,13 +939,13 @@ class App.ControllerForm extends App.Controller
         type  = parts[1]
         if key is 'tickets.title'
           attribute_config = {
-            name:       attribute.name + '::tickets.title'
+            name:    attribute.name + '::tickets.title'
-            display:    'Title'
+            display: 'Title'
-            tag:        'input'
+            tag:     'input'
-            type:       'text'
+            type:    'text'
-            null:       false
+            null:    false
-            value:      value
+            value:   value
-            remove:     true
+            remove:  true
           }
         else if key is 'tickets.group_id'
           attribute_config = {

app/assets/javascripts/app/lib/base/jquery.contenteditable.js

@@ -95,10 +95,22 @@
 
       // strip html signes if multi line exists
       if ( this.options.multiline ) {
+
+        // for validation, do not retrun empty content by empty tags
+        text_plain = this.$element.text().trim()
+        if ( !text_plain || text_plain == '' ) {
+          return text_plain
+        }
         return this.$element.html()
       }
       return this.$element.text().trim()
     }
+
+    // for validation, do not retrun empty content by empty tags
+    text_plain = this.$element.text().trim()
+    if ( !text_plain || text_plain == '' ) {
+      return text_plain
+    }
     return this.$element.html().trim()
   }
 

public/assets/tests/form.js

@@ -14,6 +14,7 @@ test( "form elements check", function() {
     selectmulti2: [ false, true ],
     selectmultioption1: false,
     selectmultioption2: [ false, true ],
+    richtext2: 'lalu <l> lalu',
   }
   new App.ControllerForm({
     el:        el,
@@ -31,7 +32,8 @@ test( "form elements check", function() {
         { name: 'selectmulti2', display: 'SelectMulti2', tag: 'select', null: false, multiple: true, options: { true: 'internal', false: 'public' }, default: defaults['selectmulti2'] },
         { name: 'selectmultioption1', display: 'SelectMultiOption1', tag: 'select', null: true, multiple: true, options: [{ value: true, name: 'internal' }, { value: false, name: 'public' }], default: defaults['selectmultioption1'] },
         { name: 'selectmultioption2', display: 'SelectMultiOption2', tag: 'select', null: false, multiple: true, options: [{ value: true, name: 'A' }, { value: 1, name: 'B'}, { value: false, name: 'C' }], default: defaults['selectmultioption2'] },
-
+        { name: 'richtext1', display: 'Richtext1', tag: 'richtext', limit: 100, null: true, upload: true, default: defaults['richtext1']  },
+        { name: 'richtext2', display: 'Richtext2', tag: 'richtext', limit: 100, null: true, upload: true, default: defaults['richtext2']  },
       ]
     },
     autofocus: true
@@ -79,6 +81,14 @@ test( "form elements check", function() {
   equal( el.find('[name="selectmulti2"]').prop('required'), true, 'check selectmulti2 required')
   equal( el.find('[name="selectmulti2"]').is(":focus"), false, 'check selectmulti2 focus')
 
+  //equal( el.find('[name="richtext1"]').val(), '', 'check textarea1 value')
+  //equal( el.find('[name="richtext1"]').prop('required'), false, 'check textarea1 required')
+  equal( el.find('[name="richtext1"]').is(":focus"), false, 'check textarea1 focus')
+
+  //equal( el.find('[name="richtext2"]').val(), 'lalu <l> lalu', 'check textarea2 value')
+  //equal( el.find('[name="richtext2"]').prop('required'), true, 'check textarea2 required')
+  equal( el.find('[name="richtext2"]').is(":focus"), false, 'check textarea2 focus')
+
 });
 
 test( "form params check", function() {
@@ -98,6 +108,13 @@ test( "form params check", function() {
     selectmultioption2: [ false, true ],
     autocompletion2: 'id2',
     autocompletion2_autocompletion_value_shown: 'value2',
+    richtext2: '<div>lalu <b>b</b> lalu</div>',
+    richtext3: '<div></div>',
+    richtext4: '<div>lalu <i>b</i> lalu</div>',
+    richtext5: '<div></div>',
+    richtext6: '<div>lalu <b>b</b> lalu</div>',
+    richtext7: "<div>&nbsp;<div>&nbsp;\n</div>  \n</div>",
+    richtext8: '<div>lalu <i>b</i> lalu</div>',
   }
   new App.ControllerForm({
     el:        el,
@@ -117,6 +134,14 @@ test( "form params check", function() {
         { name: 'selectmultioption2', display: 'SelectMultiOption2', tag: 'select', null: false, multiple: true, options: [{ value: true, name: 'A' }, { value: 1, name: 'B'}, { value: false, name: 'C' }] },
         { name: 'autocompletion1', display: 'AutoCompletion1', tag: 'autocompletion', null: false, options: { true: 'internal', false: 'public' }, source: [ { label: "Choice1", value: "value1", id: "id1" }, { label: "Choice2", value: "value2", id: "id2" }, ], minLength: 1 },
         { name: 'autocompletion2', display: 'AutoCompletion2', tag: 'autocompletion', null: false, options: { true: 'internal', false: 'public' }, source: [ { label: "Choice1", value: "value1", id: "id1" }, { label: "Choice2", value: "value2", id: "id2" }, ], minLength: 1 },
+        { name: 'richtext1', display: 'Richtext1', tag: 'richtext', maxlength: 100, null: true, type: 'richtext', multiline: true, upload: true, default: defaults['richtext1']  },
+        { name: 'richtext2', display: 'Richtext2', tag: 'richtext', maxlength: 100, null: true, type: 'richtext', multiline: true, upload: true, default: defaults['richtext2']  },
+        { name: 'richtext3', display: 'Richtext3', tag: 'richtext', maxlength: 100, null: true, type: 'richtext', multiline: false, default: defaults['richtext3']  },
+        { name: 'richtext4', display: 'Richtext4', tag: 'richtext', maxlength: 100, null: true, type: 'richtext', multiline: false, default: defaults['richtext4']  },
+        { name: 'richtext5', display: 'Richtext5', tag: 'richtext', maxlength: 100, null: true, type: 'textonly', multiline: true, upload: true, default: defaults['richtext5']  },
+        { name: 'richtext6', display: 'Richtext6', tag: 'richtext', maxlength: 100, null: true, type: 'textonly', multiline: true, upload: true, default: defaults['richtext6']  },
+        { name: 'richtext7', display: 'Richtext7', tag: 'richtext', maxlength: 100, null: true, type: 'textonly', multiline: false, default: defaults['richtext7']  },
+        { name: 'richtext8', display: 'Richtext8', tag: 'richtext', maxlength: 100, null: true, type: 'textonly', multiline: false, default: defaults['richtext8']  },
       ],
     },
     params: defaults,
@@ -165,6 +190,39 @@ test( "form params check", function() {
   equal( el.find('[name="selectmulti2"]').prop('required'), true, 'check selectmulti2 required')
   equal( el.find('[name="selectmulti2"]').is(":focus"), false, 'check selectmulti2 focus')
 
+  params = App.ControllerForm.params( el )
+  test_params = {
+    input1: '',
+    input2: '123abc',
+    password1: '',
+    password1_confirm: '',
+    password2: 'pw1234<l>',
+    password2_confirm: 'pw1234<l>',
+    textarea1: '',
+    textarea2: 'lalu <l> lalu',
+    select1: 'false',
+    select2: 'true',
+    selectmulti1: 'false',
+    selectmulti2: [ 'true', 'false' ],
+    selectmultioption1: 'false',
+    selectmultioption2: [ 'true', 'false' ],
+    autocompletion1: '',
+    autocompletion1_autocompletion: '',
+    autocompletion1_autocompletion_value_shown: '',
+    autocompletion2: 'id2',
+    autocompletion2_autocompletion: 'value2',
+    autocompletion2_autocompletion_value_shown: 'value2',
+    richtext1: '',
+    richtext2: '<div>lalu <b>b</b> lalu</div>',
+    richtext3: '',
+    richtext4: '<div>lalu <i>b</i> lalu</div>',
+    richtext5: '',
+    richtext6: '<div>lalu <b>b</b> lalu</div>',
+    richtext7: '',
+    richtext8: '<div>lalu <i>b</i> lalu</div>',
+  }
+  deepEqual( params, test_params, 'form param check' );
+
 });
 
 test( "form defaults + params check", function() {