Improved date and datetime validation.

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

@@ -2367,7 +2367,7 @@ class App.ControllerForm extends App.Controller
                 throw "Invalid Date #{year}-#{format(month)}-#{format(day)}"
               param[ namespace[0] ] = "#{time.getUTCFullYear()}-#{format(time.getUTCMonth()+1)}-#{format(time.getUTCDate())}"
             catch err
-              param[ namespace[0] ] = undefined
+              param[ namespace[0] ] = null
               console.log('ERR', err)
           else
             param[ namespace[0] ] = undefined
@@ -2405,7 +2405,7 @@ class App.ControllerForm extends App.Controller
               time.setMinutes( time.getMinutes() + time.getTimezoneOffset() )
               param[ namespace[0] ] = time.toISOString()
             catch err
-              param[ namespace[0] ] = undefined
+              param[ namespace[0] ] = null
               console.log('ERR', err)
           else
             param[ namespace[0] ] = undefined
@@ -2511,13 +2511,21 @@ class App.ControllerForm extends App.Controller
 
     # show new errors
     for key, msg of data.errors
+
+      # use native fields
       item = lookupForm.find('[name="' + key + '"]').closest('.form-group')
       item.addClass('has-error')
       item.find('.help-inline').html(msg)
 
+      # use meta fields
       item = lookupForm.find('[data-name="' + key + '"]').closest('.form-group')
       item.addClass('has-error')
       item.find('.help-inline').html(msg)
 
-    # set autofocus
+    # set autofocus by delay to make validation testable
-    lookupForm.find('.has-error').find('input, textarea, select').first().focus()
+    App.Delay.set(
+      ->
+        lookupForm.find('.has-error').find('input, textarea, select').first().focus()
+      200
+      'validate'
+    )

app/assets/javascripts/app/models/_application_model.js.coffee

@@ -138,6 +138,18 @@ class App.Model extends Spine.Model
             errors[attributeName] = 'didn\'t match'
             errors["#{attributeName}_confirm"] = ''
 
+        # check datetime
+        if attribute.tag is 'datetime' && data['params'][attributeName] is null
+          errors[attributeName] = 'invalid'
+
+          # validate value
+
+        # check date
+        if attribute.tag is 'date' && data['params'][attributeName] is null
+          errors[attributeName] = 'invalid'
+
+          # validate value
+
     # return error object
     if !_.isEmpty(errors)
       console.log 'error', 'validation failed', errors

public/assets/tests/form-validation.js

@@ -153,20 +153,26 @@ test( "datetime validation check", function() {
   equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), false, 'check datetime1 has-error')
   equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
 
-  el.find('[name="{datetime}datetime1___day"]').val('47')
+  el.find('[name="{datetime}datetime1___day"]').val('47').blur()
-  el.find('[name="{datetime}datetime1___month"]').val('1')
+  deepEqual( el.find('[name="{datetime}datetime1___day"]').hasClass('has-error'), true )
-  el.find('[name="{datetime}datetime1___year"]').val('2015')
+  el.find('[name="{datetime}datetime1___month"]').val('1').blur()
-  el.find('[name="{datetime}datetime1___hour"]').val('12')
+  deepEqual( el.find('[name="{datetime}datetime1___month"]').hasClass('has-error'), false )
-  el.find('[name="{datetime}datetime1___minute"]').val('42')
+  el.find('[name="{datetime}datetime1___year"]').val('2015').blur()
+  deepEqual( el.find('[name="{datetime}datetime1___year"]').hasClass('has-error'), false )
+  el.find('[name="{datetime}datetime1___hour"]').val('12').blur()
+  deepEqual( el.find('[name="{datetime}datetime1___hour"]').hasClass('has-error'), false )
+  el.find('[name="{datetime}datetime1___minute"]').val('42').blur()
+  deepEqual( el.find('[name="{datetime}datetime1___minute"]').hasClass('has-error'), false )
+
   params = App.ControllerForm.params( el )
   errors = form.validate(params)
   test_errors = {
-    datetime1: "is required",
+    datetime1: "invalid",
   }
   deepEqual( errors, test_errors, 'validation errors check' )
   App.ControllerForm.validate( { errors: errors, form: el } )
   equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), true, 'check datetime1 has-error')
-  equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
+  equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), 'invalid', 'check datetime1 error message')
 
 });
 
@@ -227,26 +233,29 @@ test( "date validation check", function() {
   equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message')
 
   // set invalid values
-  el.find('[name="{date}date1___day"]').val('47')
+  el.find('[name="{date}date1___day"]').val('47').blur()
-  el.find('[name="{date}date1___month"]').val('1')
+  deepEqual( el.find('[name="{date}date1___day"]').hasClass('has-error'), true )
-  el.find('[name="{date}date1___year"]').val('2015')
+  el.find('[name="{date}date1___month"]').val('1').blur()
+  deepEqual( el.find('[name="{date}date1___month"]').hasClass('has-error'), false )
+  el.find('[name="{date}date1___year"]').val('2015').blur()
+  deepEqual( el.find('[name="{date}date1___year"]').hasClass('has-error'), false )
 
   // check params
   params = App.ControllerForm.params( el )
   test_params = {
-    date1: undefined,
+    date1: null,
   }
   deepEqual( params, test_params, 'params check' )
 
   // check errors
   errors = form.validate(params)
   test_errors = {
-    date1: "is required",
+    date1: "invalid",
   }
   deepEqual( errors, test_errors, 'validation errors check' )
   App.ControllerForm.validate( { errors: errors, form: el } )
   equal( el.find('[data-name="date1"]').closest('.form-group').hasClass('has-error'), true, 'check date1 has-error')
-  equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message')
+  equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), 'invalid', 'check date1 error message')
 
 });