Basic support for custom validation messages

By default the validation messages comes from  tv4.js, but now you can
specify your own via the "validationMessages" attribute either in schema
(not recomended) or in the form defintion. If it's a string, that
is presented to the user on any error *but* required. If it's an object
that is treated as an map between tv4.js error codes and a messages.

Special "keys" are 'required' and 'default' that do what you think they do.

Author: davidlgj

src/directives/decorators/bootstrap/default.html

@@ -9,6 +9,5 @@
          ng-model="$$value$$"
          schema-validate="form.schema">
 
-  <span class="help-block" ng-show="form.description && !hasError()">{{form.description}} </span>
-  <span class="help-block" ng-show="hasError()">{{schemaError}}</span>
+  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
 </div>

src/directives/decorators/bootstrap/select.html

@@ -8,6 +8,5 @@
           ng-required="form.required"
           ng-options="val as name for (val,name) in form.titleMap">
   </select>
-  <span class="help-block" ng-show="form.description && !hasError()">{{form.description}}</span>
-  <span class="help-block" ng-show="hasError()">{{schemaError}}</span>
+  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}} </span>
 </div>

src/directives/decorators/bootstrap/textarea.html

@@ -5,6 +5,5 @@
             ng-model="$$value$$"
             schema-validate="form.schema"></textarea>
 
-  <span class="help-block" ng-show="form.description && !hasError()">{{form.description}} </span>
-  <span class="help-block" ng-show="hasError()">{{schemaError}} {{ngModel.$error}}</span>
+  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}} </span>
 </div>

src/directives/schema-validate.js

@@ -6,6 +6,7 @@ angular.module('schemaForm').directive('schemaValidate',function(){
     require: 'ngModel',
     link: function(scope,element,attrs,ngModel) {
       scope.ngModel = ngModel;
+      var error = null;
       var schema  = scope.$eval(attrs.schemaValidate);
 
       ngModel.$parsers.unshift(function(viewValue) {
@@ -43,11 +44,12 @@ angular.module('schemaForm').directive('schemaValidate',function(){
         if (result.valid) {
           // it is valid
           ngModel.$setValidity('schema', true);
+          error = null;
           return viewValue;
         } else {
           // it is invalid, return undefined (no model update)
           ngModel.$setValidity('schema', false);
-          scope.schemaError = result.error.message;
+          error = result.error;
           return undefined;
         }
       });
@@ -57,6 +59,10 @@ angular.module('schemaForm').directive('schemaValidate',function(){
         return scope.ngModel.$invalid && !scope.ngModel.$pristine;
       };
 
+      scope.schemaError = function() {
+        return error;
+      };
+
     }
   };
 });

src/services/decorators.js

@@ -87,6 +87,35 @@ angular.module('schemaForm').provider('schemaFormDecorators',['$compileProvider'
                 }
               }
             };
+
+            /**
+             * Error message handler
+             * An error can either be a schema validation message or a angular js validtion
+             * error (i.e. required)
+             */
+            scope.errorMessage = function(schemaError,$error) {
+              //User has supplied validation messages
+              if (scope.form.validationMessage) {
+                if (schemaError) {
+                  if (angular.isString(scope.form.validationMessage)) {
+                    return scope.form.validationMessage;
+                  }
+
+                  return scope.form.validationMessage[schemaError.code] || scope.form.validationMessage.default;
+                } else {
+                  return scope.form.validationMessage.required || scope.form.validationMessage;
+                }
+              }
+
+              //No user supplied validation message.
+              if (schemaError) {
+                return schemaError.message; //use tv4.js validation message
+              }
+
+              //Otherwise we only use required so it must be it.
+              return "Required";
+
+            };
           }
         };
       }]);

src/services/schema-form.js

@@ -57,6 +57,10 @@ angular.module('schemaForm').factory('schemaForm',[function(){
     if (schema.readOnly || schema.readonly)  f.readonly  = schema.readOnly || schema.readonly;
     if (schema.minimum) f.minimum = schema.minimum + (schema.exclusiveMinimum?1:0);
     if (schema.maximum) f.maximum = schema.maximum - (schema.exclusiveMaximum?1:0);
+
+    //Non standard attributes
+    if (schema.validationMessage) f.validationMessage = schema.validationMessage;
+    if (schema.enumNames) f.titleMap = schema.enumNames;
     f.schema = schema;
     return f;
   };
@@ -110,10 +114,12 @@ angular.module('schemaForm').factory('schemaForm',[function(){
       var f = stdFormObj(schema,options);
       f.key  = options.path;
       f.type = 'select';
-      f.titleMap = {};
-      schema.enum.forEach(function(name){
-        f.titleMap[name] = name;
-      });
+      if (!f.titleMap) {
+        f.titleMap = {};
+        schema.enum.forEach(function(name){
+          f.titleMap[name] = name;
+        });
+      }
       options.lookup[options.path] = f;
       return f;
     }
@@ -124,10 +130,12 @@ angular.module('schemaForm').factory('schemaForm',[function(){
       var f = stdFormObj(schema,options);
       f.key  = options.path;
       f.type = 'checkboxes';
-      f.titleMap = {};
-      schema.items.enum.forEach(function(name){
-        f.titleMap[name] = name;
-      });
+      if (!f.titleMap) {
+        f.titleMap = {};
+        schema.items.enum.forEach(function(name){
+          f.titleMap[name] = name;
+        });
+      }
       options.lookup[options.path] = f;
       return f;
     }

test/schema-form-test.js

@@ -328,6 +328,56 @@ describe('Schema form',function(){
       });
     });
 
+    it('should display custom validationMessages when specified',function(done){
+
+      inject(function($compile,$rootScope){
+        var scope = $rootScope.$new();
+        scope.person = {};
+
+        scope.schema = {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string",
+              "pattern": "^[a-z]+",
+              "validationMessage": "You are only allowed lower case letters in name."
+            },
+            "nick": {
+              "type": "string",
+              "pattern": "^[a-z]+",
+            },
+          }
+        };
+
+        scope.form = [
+          "name",
+          {
+            key: 'nick',
+            validationMessage: 'Foobar'
+          }
+        ];
+
+        var tmpl = angular.element('<form name="theform" sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+        $compile(tmpl)(scope);
+        $rootScope.$apply();
+        tmpl.find('input').each(function(){
+          $(this).scope().ngModel.$setViewValue('AÖ');
+        });
+
+        var errors = tmpl.find('.help-block');
+
+        //timeout so we can do a second $apply
+        setTimeout(function(){
+          $rootScope.$apply(); //this actually updates the view with error messages
+          errors.eq(0).text().should.be.equal("You are only allowed lower case letters in name.");
+          errors.eq(1).text().should.be.equal("Foobar");
+          done();
+        },0);
+
+      });
+    });
+
 
     it('should use ng-required on required fields',function(){