WebControlCNC · gb0101010101 · May 7, 2020
diff --git a/static/scripts/frontpage3d.js b/static/scripts/frontpage3d.js
@@ -807,3 +807,24 @@ function toggle3DPO(){
     }
 }
 
+function onFooterSubmit(){
+  var form = $("#settingsForm")
+  // JQuery returns list of forms so must select first [0].
+  isValid = form[0].checkValidity();
+  if (isValid) {
+    var url = $("#pageID").val()
+    $.ajax({
+      url : '/'+url,
+      type: "POST",
+      data: form.serialize(),
+      success: function (data) {
+        console.log("success");
+        $('#contentModal').modal('toggle')
+      },
+      error: function (jXHR, textStatus, errorThrown) {
+        alert(errorThrown);
+      }
+    });
+  }
+}
+
diff --git a/static/scripts/frontpage3dcontrols.js b/static/scripts/frontpage3dcontrols.js
@@ -152,3 +152,11 @@ function processStatusMessage(data){
     else
         $("#currentPositioningMode").text("Incremental (G91)");
 }
+
+function inputDecimalValidate() {
+    var re = new RegExp($(this).attr("pattern"));
+    valid = pattern.test($(this).val());
+    if (!valid) {
+      $(this).setCustomValidity("Decimal input pattern mismatch");
+    }
+}
diff --git a/static/scripts/frontpageControls.js b/static/scripts/frontpageControls.js
@@ -22,6 +22,25 @@ $(document).ready(function(){
     var controllerMessage = document.getElementById('controllerMessage');
     controllerMessage.scrollTop = controllerMessage.scrollHeight;
     $("#stickyButtons").css("top", $(".navbar").outerHeight());
+
+    // Set custom validation on all form inputs of type 'number' with attribute 'pattern'.
+    // Input type 'number' does not support 'pattern' attribute by default using HTML5.
+    // Input type 'number' always returns a value compatible with parseFloat using period as decimal separator.
+    // @todo: This event handler may need to be moved to other JS files for more/less global application.
+    $(':input[type="number"][pattern]').change(function () {
+      var re = new RegExp($(this).attr("pattern"));
+      var isValid = re.test($(this).val());
+      // JQuery selector returns array of possible matches.
+      // Validity checks must be applied to first item [0].
+      if (isValid) {
+        // Set empty value to clear error.
+        $(this)[0].setCustomValidity("");
+      }
+      else {
+        // Set title as error message.
+        $(this)[0].setCustomValidity($(this).attr("title"));
+      }
+    });
 });
 
 function pauseRun(){
@@ -138,13 +157,12 @@ function boardDataUpdate(data){
 }
 
 function moveAction(direction) {
-	distance = $("#distToMove").val();
-	distanceValid = distance.search(/^[0-9]*(\.[0-9]{0,3})?$/);
-	if (distanceValid == 0) {
-		action('move', direction, distance);
-	} else {
-		$("#distToMove").focus();
-	}
+  // JQuery returns list of matching forms so select first [0] for validitity checking.
+  var isValid = $("#distInput")[0].checkValidity();
+  if (isValid) {
+    distance = $("#distToMove").val();
+    action('move', direction, distance);
+  }
 }
 
 function processStatusMessage(data){

diff --git a/static/scripts/settings.js b/static/scripts/settings.js
@@ -1,9 +1,11 @@
 function onFooterSubmit(){
+  var form = $("#settingsForm")
+  if (form[0].checkValidity()) {
     var url = $("#pageID").val()
     $.ajax({
         url : '/'+url,
         type: "POST",
-        data: $("#settingsForm").serialize(),
+        data: form.serialize(),
         success: function (data) {
           console.log("success");
             $('#contentModal').modal('toggle')
@@ -12,8 +14,10 @@ function onFooterSubmit(){
             alert(errorThrown);
         }
     });
+  }
 }
 
+/*
 $(document).ready(function () {
     $('#settingsForm').on('submit', function(e) {
         e.preventDefault();
@@ -38,6 +42,7 @@ $(document).ready(function () {
      });
 
 });
+*/
 
 function updatePorts(data){
   var selectedPort = $("#comPorts").find(":selected").text();

diff --git a/templates/editBoard.html b/templates/editBoard.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="editBoardForm">
@@ -32,17 +32,17 @@ <h4 class="card-title">
                   <div class="row">
                         <div class="form-group col-6">
                           <label for="width">Width</label>
-                          <input id="width"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$"  class="form-control" name="width" value="{{width}}">
+                          {{ macros.input_decimal("width", False, width) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="height">Height</label>
-                          <input id="height"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$"  class="form-control" name="height" value="{{height}}">
+                          {{ macros.input_decimal("height", True, height) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="Thickness">Thickness</label>
-                          <input id="thickness" type="number" step="any"  class="form-control" name="thickness" value="{{thickness}}">
+                          {{ macros.input_decimal("thickness", True, thickness) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                   </div>
@@ -56,12 +56,12 @@ <h4 class="card-title">
                   <div class="row">
                         <div class="form-group col-6">
                           <label for="centerX">Center X</label>
-                          <input id="centerX" type="number" step="any"  class="form-control" name="centerX" value="{{centerX}}">
+                          {{ macros.input_decimal("centerX", True, centerX) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="centerY">Center Y</label>
-                          <input id="centerY" type="number" step="any"  class="form-control" name="centerY" value="{{centerY}}">
+                          {{ macros.input_decimal("centerY", True, centerY) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                   </div>

diff --git a/templates/editBoard_mobile.html b/templates/editBoard_mobile.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="editBoardForm">
@@ -28,17 +28,17 @@ <h4 class="card-title">
           <div class="row">
                 <div class="form-group col-6">
                   <label for="width">Width</label>
-                  <input id="width" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="width" value="{{width}}">
+                  {{ macros.input_decimal("width", True, width) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="height">Height</label>
-                  <input id="height" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="height" value="{{height}}">
+                  {{ macros.input_decimal("height", True, height) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="Thickness">Thickness</label>
-                  <input id="thickness" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="thickness" value="{{thickness}}">
+                  {{ macros.input_decimal("thickness", True, thickness) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
           </div>
@@ -50,12 +50,12 @@ <h4 class="card-title">
           <div class="row">
                 <div class="form-group col-6">
                   <label for="centerX">Center X</label>
-                  <input id="centerX" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="centerX" value="{{centerX}}">
+                  {{ macros.input_decimal("centerX", True, centerX) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="centerY">Center Y</label>
-                  <input id="centerY" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="centerY" value="{{centerY}}">
+                  {{ macros.input_decimal("centerY", True, centerY) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
           </div>

diff --git a/templates/frontpage3d.html b/templates/frontpage3d.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='11102018j') }}" crossorigin="anonymous">
   <!--<style> #workarea {background-color: #AAA; width: 100%; height: 100%; border: 1px solid black;}</style>-->
@@ -26,7 +26,7 @@ <h3>Controls</h3>
         <div>
         <div class="controls row">
           <div class="col-3 mb-1">
-            <button type="button" class="btn btn-secondary btn-block disabler" onclick="moveAction('upLeft')"><i data-feather="arrow-up-left"></i></button>
+            <button type="button" data-wc-major-digits="5" class="btn btn-secondary btn-block disabler" onclick="moveAction('upLeft')"><i data-feather="arrow-up-left"></i></button>
           </div>
           <div class="col-3 mb-1">
             <button type="button" class="btn btn-dark btn-block" onclick="moveAction('up')"><i data-feather="arrow-up"></i></button>
@@ -68,7 +68,7 @@ <h3>Controls</h3>
             <label>Distance:</label>
           </div>
           <div class="col-3 mb-1">
-            <form id="distInput" onsubmit="return false;"><input class="form-control" type="text" pattern="^[0-9]*(\.[0-9]{0,3})?$" id="distToMove" title="Positive number with maximum 3 decimal places"></form>
+            <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
           </div>
           <div class="col-3 mb-1">
             <button id="units" type="button" class="btn btn-secondary" onclick="unitSwitch();">--</button>

diff --git a/templates/frontpage3d_mobile.html b/templates/frontpage3d_mobile.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='10262019a') }}" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -83,7 +83,7 @@ <h3>Controls</h3>
     </div>
     <div class="row">
       <div class="col-4  mb-1">
-        <form onsubmit="return false;"><input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$" id="distToMove" title="Positive number with maximum 3 decimal places"></form>
+        <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
       </div>
       <div class="col-4  mb-1">
         <button id="units" type="button" class="btn btn-lg btn-secondary" onclick="unitSwitch()">--</button>

diff --git a/templates/frontpage3d_mobilecontrols.html b/templates/frontpage3d_mobilecontrols.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='10262019b') }}" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -86,7 +86,7 @@ <h3>Controls</h3>
       <label>Dist To Move</label>
     </div>
     <div class="col-4  mb-1">
-      <input class="form-control" type="number" id="distToMove" value="0.01">
+      <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
     </div>
     <div class="col-4  mb-1">
       <button id="units" type="button" class="btn btn-lg btn-secondary" onclick="unitSwitch();">--</button>

diff --git a/templates/holeyCalibration.html b/templates/holeyCalibration.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="card-body">
@@ -14,62 +14,62 @@ <h4 class="card-title">Measurements</h4>
       <div class="form-group">
         <div class="form-group">
           <label for="M1">M1</label>
-          <input id="M1" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="M1" value="0">
+          {{ macros.input_decimal("M1", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M2">M2</label>
-          <input id="M2" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="M2" value="0">
+          {{ macros.input_decimal("M2", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M3">M3</label>
-          <input id="M3" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M3" value="0">
+          {{ macros.input_decimal("M3", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M4">M4</label>
-          <input id="M4" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M4" value="0">
+          {{ macros.input_decimal("M4", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M5">M5</label>
-          <input id="M5" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M5" value="0">
+          {{ macros.input_decimal("M5", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M6">M6</label>
-          <input id="M6" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M6" value="0">
+          {{ macros.input_decimal("M6", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M7">M7</label>
-          <input id="M7" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M7" value="0">
+          {{ macros.input_decimal("M7", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M8">M8</label>
-          <input id="M8" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M8" value="0">
+          {{ macros.input_decimal("M8", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M9">M9</label>
-          <input id="M9" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M9" value="0">
+          {{ macros.input_decimal("M9", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M10">M10</label>
-          <input id="M10" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M10" value="0">
+          {{ macros.input_decimal("M10", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M11">M11</label>
-          <input id="M11" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M11" value="0">
+          {{ macros.input_decimal("M11", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M12">M12</label>
-          <input id="M12" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M12" value="0">
+          {{ macros.input_decimal("M12", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="row">

diff --git a/templates/macros.html b/templates/macros.html
@@ -0,0 +1,5 @@
+{% macro input_decimal(id, required = False, default_value = "", disabled = False, digits_before = 4, digits_after = 5, error_text = "") %}
+  {% set pattern = "^[0-9]{0," ~ digits_before ~ "}([\.,][0-9]{0," ~ digits_after ~ "})?$" %}
+  {% set title = error_text|default("Decimal number with one separator with max " ~ digits_before ~ " major digits and max " ~ digits_after + " minor digits", True) %}
+  <input id="{{ id }}" type="number" step="any" inputmode="decimal" pattern="{{ pattern }}" class="form-control" name="{{ id }}" value="{{ default_value }}" {{ 'required=required' if required }} {{ 'disabled=disabled' if disabled }} title="{{ title }}">
+{% endmacro %}