[validation] When the field is empty the validatore are not applied. …

example/js/initFocus.js

@@ -3,18 +3,21 @@ var domain = {
     style: "do_text",
     type: "text",
     component: "PapaSinge",
-    validation: [{
+    validator: [{
       type: "function",
-      value: function () {
-        return false;
+      options:{
+          translationKey: 'domain.doTEXT.test'
+      },
+      value: function (d) {
+        return _.isString(d);
       }
     }]
   },
   "DO_EMAIL": {
     style: "do_email",
     type: "email",
     component: "PapaMail",
-    validation: [{
+    validator: [{
       type: "function",
       value: function () {
         return true;
@@ -46,9 +49,9 @@ var entities = {
     "firstName": {
       "domain": "DO_TEXT",
       "required": false,
-      "validator": function (data) {
-        return data.length <= 3 ? "le champ doit dépasser la taille de 3" : true;
-      }
+      "validator": [{options:{translationKey: 'entityContactValidation.test'}, type:'function', value: function (data) {
+        return data.length <= 3 ? false : true;
+    }}]
     },
     "lastName": {
       "domain": "DO_TEXT",

src/common/field/mixin/validation-behaviour.js

@@ -11,6 +11,11 @@ let validationMixin ={
       validator: undefined
     };
   },
+  /**
+   * Compute the validation status and merge all errors into one.
+   * @param  {object} validationStatus - The result from the validation.
+   * @return {true | string} - true if the validation is ok and a message if it is not the case.
+   */
   _computeValidationStatus(validationStatus){
     if(validationStatus.isValid){
       return true;
@@ -22,35 +27,37 @@ let validationMixin ={
    * @return {object}
    */
   validateInput: function validateInputText() {
-    var value = this.getValue();
-    if (this.props.isRequired && (value === undefined || value === '')) {
-      return this.i18n('field.required', {name: this.i18n(this.props.label)});
-    }
-    if (this.props.validator) {
-      var validStat = this._computeValidationStatus(validate({
-          value: value,
-          name: this.i18n(this.props.label)
-        },
-        this.props.validator
-      ));
-      if(validStat !== true){
-        validStat = this.i18n(validStat);
+      let value = this.getValue();
+      let {isRequired, validator, label} = this.props;
+      if (isRequired && (undefined === value || '' === value)) {
+          return this.i18n('field.required', {name: this.i18n(label)});
       }
-      return validStat;
-    }
-    return true;
+      console.log('validation', label, 'value', value, 'validator', validator);
+      //The validation is performed only when the field has a value, otherwise, only the required validation is performed.
+      if (validator && undefined !== value) {
+          let validStat = this._computeValidationStatus(validate({
+               value: value,
+               name: this.i18n(label)
+           },
+           validator
+          ));
+          if(true !== validStat){
+              validStat = this.i18n(validStat);
+          }
+          return validStat;
+      }
+      return true;
   },
   /**
   * Validate the field.
   * @return {object} - undefined if valid, {name: "errors"} if not valid.
   */
   validate: function validateField() {
-    var validationStatus = this.validateInput();
-    if(validationStatus !== true){
-      this.setError(validationStatus);
-      return validationStatus;
-    }
-    return;
+      let validationStatus = this.validateInput();
+      if(true !== validationStatus){
+          this.setError(validationStatus);
+          return validationStatus;
+      }
   },
   /**
    * Set the error on the field.

src/common/form/example/index.html

@@ -17,6 +17,7 @@
 
     <!-- Material degign-->
     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/i18next/1.6.3/i18next-1.6.3.min.js'></script>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
     <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
     <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">