Added invalid result warning

source/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name" : "Extra buttons",
 	"author" : "Dobility",
-	"version": "1.2.8",
+	"version": "2.0.1",
 	"supportedFieldTypes": ["text", "integer", "decimal"],
 	"hideDefaultRequiredMessage": true,
 	"hideDefaultConstraintMessage": true

source/script.js

@@ -6,28 +6,42 @@ var controlMessage = document.querySelector('.control-message')
 var formattedSpan = document.querySelector('#formatted')
 var buttonContainer = document.querySelector('#buttons')
 var warningContainer = document.querySelector('#warning')
+var invalidBox = document.querySelector('.error-box')
 
 var fieldType = fieldProperties.FIELDTYPE
 var appearance = fieldProperties.APPEARANCE
 var altValues = []
 var buttonsDisp = ''
+var specialConstraint
+
+invalidBox.style.display = 'none'
 
 if (fieldType === 'integer') {
   input.inputmode = 'numeric'
   input.type = 'number'
+  specialConstraint = new RegExp('^-?[0-9]+$')
+  invalidBox.innerHTML = 'Invalid: Answer must be a valid integer.'
 } else if (fieldType === 'decimal') {
   input.inputmode = 'decimal'
   input.type = 'number'
+  specialConstraint = new RegExp('^-?([0-9]+.?[0-9]*)|([0-9]*.?[0-9]+)$')
+  invalidBox.innerHTML = 'Invalid: Answer must be a valid decimal number.'
 } else if (fieldType === 'text') {
   if (appearance.indexOf('numbers_phone') !== -1) {
     input.inputmode = 'tel'
     input.type = 'tel'
+    specialConstraint = new RegExp('^[0-9-+.#* ]+$')
+    invalidBox.innerHTML = 'Invalid: Answer can only contain numbers, hyphens (-), plus signs (+), dots (.), hash signs (#), asterisks (*), and/or spaces.'
   } else if (appearance.indexOf('numbers_decimal') !== -1) {
     input.inputmode = 'decimal'
     input.type = 'number'
+    specialConstraint = new RegExp('^-?([0-9]+.?[0-9]*)|([0-9]*.?[0-9]+)$')
+    invalidBox.innerHTML = 'Invalid: Answer must be a valid decimal number.'
   } else if (appearance.indexOf('numbers') !== -1) {
     input.inputmode = 'numeric'
     input.type = 'number'
+    specialConstraint = new RegExp('^[0-9-+. ]+$')
+    invalidBox.innerHTML = 'Invalid: Answer can only contain numbers, hyphens (-), plus signs (+), dots (.), and/or spaces.'
   }
 }
 
@@ -115,8 +129,14 @@ input.oninput = function () {
       formattedSpan.innerHTML = total
     }
   }
-  setMetaData('')
-  setAnswer(currentAnswer)
+
+  if ((currentAnswer === '') || specialConstraint.test(currentAnswer)) {
+    invalidBox.style.display = 'none'
+    setMetaData('')
+    setAnswer(currentAnswer)
+  } else {
+    invalidBox.style.display = ''
+  }
 }
 
 function buttonFontAdjuster (button) { // djusts size of the text of the buttons in case the text is too long

source/style.css

@@ -126,4 +126,12 @@ button.bluebutton{
 .form-group.has-error .form-control { /*Input box when there is an error*/
     border-color: #f56954!important;
     box-shadow: none;
+}
+
+.error-box {
+    background: #f56954;
+    display: block;
+    width: 96%;
+    color: #FFF;
+    padding: 5px 10px;
 }

source/template.html

@@ -47,4 +47,6 @@
 <div class="label-container" id="warning" dir="auto">
     <div id="warning-message">Warning: This field already has a value. Are you sure you would like to replace it?</div>
     <button id="yes" class="whitebutton">Yes</button><button id="no" class="bluebutton">No</button>
-</div>
+</div>
+
+<div class="error-box">Invalid entry!</div>