--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Mon Sep 02 09:34:29 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Mon Sep 02 13:17:38 2019 +0200
@@ -53,14 +53,13 @@
             </div>
           </div>
           <!-- deactivate the built-in validation -->
-          <form id="novalidatedform" novalidate />
+          <form id="novalidatedform" />
           <input
             v-model.number="morphologyClassbreaks[i][0]"
             type="number"
             min="0"
-            step="0.1"
-            form="novalidatedform"
-            class="form-control form-control-sm"
+            step="0.01"
+            class="form-control form-control-sm numfield"
           />
           <div class="input-group-append">
             <button
@@ -92,7 +91,7 @@
         @click.prevent="submitClassbreaks"
         :class="[
           'btn btn-info btn-sm text-white',
-          { disabled: !checkValidity }
+          { disabled: !classbreaksAreValid || hasDoublettes }
         ]"
       >
         <translate>Send</translate>
@@ -103,8 +102,8 @@
       >
         <translate>Reset to defaults</translate>
       </a>
-      <span class="text-danger" v-if="!checkValidity">
-        &nbsp;<translate>Same value is used in multiple fields.</translate>
+      <span class="text-danger" v-if="hasDoublettes || !classbreaksAreValid">
+        {{ validationMessage }}
       </span>
     </div>
     <div class="px-3">
@@ -166,9 +165,8 @@
           <input
             v-model.number="morphologyClassbreaksCompare[i][0]"
             type="number"
-            step="0.1"
-            form="novalidatedform"
-            class="form-control form-control-sm"
+            step="0.01"
+            class="form-control form-control-sm numfield"
           />
           <div class="input-group-append">
             <button
@@ -219,6 +217,10 @@
 </template>
 
 <style lang="sass" scoped>
+.numfield:invalid
+ border: 2px solid
+ border-color: #ff0000
+
 .classbreak
   width: 142px
   .btn-outline-secondary
@@ -290,13 +292,40 @@
     colorPickerTitle() {
       return this.$gettext("Choose color");
     },
+    validationMessage() {
+      const doublettes = this.$gettext(
+        "Same value is used in multiple fields."
+      );
+      const invalidForm = this.$gettext(
+        "There are invalid classbreak values. Please check"
+      );
+      if (this.hasDoublettes && !this.classbreaksAreValid)
+        return `${doublettes} ${invalidForm}`;
+      if (this.hasDoublettes) return doublettes;
+      if (!this.classbreaksAreValid) return invalidForm;
+      return "";
+    },
+    classbreaksAreValid() {
+      let values = this.morphologyClassbreaks.map(e => {
+        const element = e[0];
+        if (!isNaN(element)) {
+          if (element === "") return false;
+          if (!isNaN(element)) {
+            const numberParts = String(element).split(".");
+            return numberParts.length == 2 ? numberParts[1].length < 3 : true;
+          }
+        }
+        return false;
+      });
+      return values.every(e => e === true);
+    },
     // check if the same value is used for more than one field.
-    checkValidity() {
+    hasDoublettes() {
       let values = [];
       for (let i = 0; i < this.morphologyClassbreaks.length; i++) {
         values[i] = Number(this.morphologyClassbreaks[i][0]);
       }
-      return new Set(values).size === values.length;
+      return new Set(values).size !== values.length;
     },
     checkValidityForMCCompare() {
       let values = [];