updated tutorial: jeson-editor-customizations

guide/tutorials/json-editor-customizations.md

@@ -15,77 +15,68 @@ In example a date picker editor that needs (as a dependency) the jquery datepick
         build: function () {
             var self = this;
     
-            // form-group element (bootstrap friendly)
-            self.customFormGroup = document.createElement('div');
-            self.customFormGroup.classList.add('form-group');
-    
-            // form-label element and stores a reference(bootstrap friendly)
-            self.customLabel = document.createElement('label');
-            self.customLabel.classList.add('control-label');
-            if (self.schema.title) {
-                self.customLabel.innerText = self.schema.title;
-            }
-    
-            // form control element (bootstrap friendly)
-            self.customInput = document.createElement('input');
-            self.customInput.type = 'text';
-            self.customInput.name = self.formname;
-            self.customInput.classList.add('form-control');
-    
-            // creates a paragraph for error messages and stores reference
-            self.customErrorMessage = document.createElement('p');
-            self.customErrorMessage.setAttribute('style', 'color: #a94442;');
-    
-            // datepicker options
-            self.customDatepickerOptions;
-            if (self.schema.datepickerOptions) {
-                 self.customDatepickerOptions = self.schema.datepickerOptions;
-            } else {
-                 self.customDatepickerOptions = {};
-            }
-    
-            // the min date will be ALWAYS today
+            // group
+            self.group = document.createElement('div');
+            self.group.classList.add('form-group');
+            self.container.appendChild(self.group);
+    
+            // label
+            self.label = document.createElement('label');
+            self.label.classList.add('control-label');
+            self.label.innerText = self.schema.title ? self.schema.title : '';
+            self.group.appendChild(self.label);
+    
+            // input
+            self.input = document.createElement('input');
+            self.input.type = 'text';
+            self.input.name = self.formname; // IMPORTANT
+            self.input.classList.add('form-control');
+            self.group.appendChild(self.input);
+    
+            // infos
+            self.infos = document.createElement('p');
+            self.infos.classList.add('help-block');
+            self.infos.classList.add('errormsg');
+            self.group.appendChild(self.infos);
+    
+            // set the input as a datepicker and configure it
+            self.customDatepickerOptions = self.schema.datepickerOptions ? self.schema.datepickerOptions : {};
             self.customDatepickerOptions.minDate = new Date();
+            self.customDatepickerOptions.onSelect = function(selectedDate) {
+                self.value = selectedDate; // IMPORTANT
+                self.onChange(true); // IMPORTANT
+                if(self.jsoneditor.options.show_errors !== "never") {
+                    window.requestAnimationFrame(function() {
+                        if (self.validate()) {
+                            self.displayErrorMessages();
+                        }
+                    });
+                }
+            };
+            $(self.input).datepicker(self.customDatepickerOptions);
     
-            // event that triggers editor update
-            self.customDatepickerOptions.onClose = function(selectedDate) {
-                // update the editor value
-                self.value = selectedDate;
-                // tells JSONEditor that the values has changed
-                self.onChange(true);
     
-                // wait that the JSONEditor change event completed. Mr jdord wanted
-                //to use a requestAnimationFrame for this job. So i had to use it to.
+            // validate istantly if show_errors === "always"
+            if(self.jsoneditor.options.show_errors === "always") {
                 window.requestAnimationFrame(function() {
                     if (self.validate()) {
                         self.displayErrorMessages();
-                    }  
+                    }
                 });
-            };
-    
-            // transforms the input in a date picker
-            $(self.customInput).datepicker(self.customDatepickerOptions);
+            }
     
-            // append form group to the editor container
-            self.customFormGroup.appendChild(self.customLabel);
-            self.customFormGroup.appendChild(self.customInput);
-            self.container.appendChild(self.customFormGroup);
-            self.container.appendChild(self.customErrorMessage);
         },
     
         validate: function () {
-            // get this editor error
             var self = this;
-            self.customErrorMessages = '';
+            self.errors = '';
             self.jsoneditor.validation_results.forEach(function (error) {
-                if (error.property === self.schema.format) {
-                    self.customErrorMessages = error.message;
-                    console.log('validate', self.customErrorMessages)
+                if (error.path === self.path) {
+                    self.errors = error.message;
                 }
             });
-            // return error messages if any
-            if (self.customErrorMessages) {
-                return self.customErrorMessages;
+            if (self.errors) {
+                return self.errors;
             } else {
                 self.hideErrorMessages();
             }
@@ -93,15 +84,14 @@ In example a date picker editor that needs (as a dependency) the jquery datepick
     
         displayErrorMessages: function () {
             var self = this;
-            self.customErrorMessage.innerText = self.customErrorMessages;
-            self.customLabel.setAttribute('style', 'color: #a94442;');
+            self.infos.innerText = self.errors;
+            self.group.classList.add('has-error');
         },
     
         hideErrorMessages: function () {
-            console.log('hide errors');
             var self = this;
-            self.customErrorMessage.innerText = '';
-            self.customLabel.setAttribute('style', 'color: #000;');
+            self.infos.innerText = '';
+            self.group.classList.remove('has-error');
         }
     
     });
@@ -139,19 +129,19 @@ In example a custom validator that will be applied to schemas that have
 `format === "datepicker"`  **AND** `schema.required === true`
 
     JSONEditor.defaults.custom_validators.push(function(schema, value, path) {
-      var errors = [];
-      if(schema.format === "datepicker" && schema.required === true) {
-    
-        if(typeof value === 'undefined' || value === '') {
-            errors.push({
-                path: path,
-                property: 'datepicker', // IMPORTANT! this must be the name of the editor
-                message: this.translate("error_notset")
-            });
-        }
+        var errors = [];
+        if(schema.format === "datepicker" && schema.required === true) {
+    
+            if(typeof value === 'undefined' || value === '') {
+                errors.push({
+                    path: path,
+                    property: 'required',
+                    message: this.translate("error_notset")
+                });
+            }
     
-      }
-      return errors;
+        }
+        return errors;
     });
     
 now you can add a `required` property to the datepicker schema