Enhancements for optional questions (#153)

* Show OK button if question is not required
* Changed OK button text from "Ok" to "Skip" if not required questions have no value
* Clean up validation and optional questions
* Fix validation when a mask is defined

Co-authored-by: Johnny Yeng <[email protected]>

Author: spinn

src/components/Question.vue

@@ -71,7 +71,10 @@
           v-bind:aria-label="language.ariaOk"
         >
             <span v-if="question.type === QuestionType.SectionBreak">{{ language.continue }}</span>
-            <span v-else>{{ language.ok }}</span>
+            <span v-else>
+              <span v-if="showSkip()">{{ language.skip }}</span>
+              <span v-else>{{ language.ok }}</span>
+            </span>
         </button>
         <a 
           class="f-enter-desc"
@@ -245,6 +248,10 @@
           return this.active
         }
 
+        if (!this.question.required) {
+          return true
+        }
+
         if (this.question.allowOther && this.question.other) {
           return true
         }
@@ -262,6 +269,12 @@
         return q.hasValue && q.isValid()
       },
 
+      showSkip() {
+        const q = this.$refs.questionComponent
+
+        return q && !this.question.required && !q.hasValue
+      },
+
       /**
        * Determins if the invalid message should be shown.
        */

src/components/QuestionTypes/EmailType.vue

@@ -18,7 +18,11 @@
     },
     methods: {
       validate() {
-        return this.hasValue && /^[^@]+@.+[^.]$/.test(this.dataValue)
+        if (this.hasValue) {
+          return /^[^@]+@.+[^.]$/.test(this.dataValue)
+        }
+
+        return !this.question.required
       }
     }
   }

src/components/QuestionTypes/TextType.vue

@@ -67,7 +67,7 @@
 
     methods: {
       validate() {
-        if (this.question.mask && this.dataValue.length !== this.question.mask.length) {
+        if (this.question.mask && this.hasValue && this.dataValue.length !== this.question.mask.length) {
           return false
         }
 

src/components/QuestionTypes/UrlType.vue

@@ -33,10 +33,13 @@
             var url = new URL(this.fixAnswer(this.dataValue))
 
             return true
-          } catch(_) { /* Invalid URL */ }
+          } catch(_) { 
+            // Invalid URL
+            return false
+          }
         }
 
-        return false
+        return !this.question.required
       }
     }
   }

src/models/LanguageModel.js

@@ -12,6 +12,7 @@ export default class LanguageModel {
     this.shiftKey = 'Shift'
     this.ok = 'OK'
     this.continue = 'Continue'
+    this.skip = 'Skip'
     this.pressEnter = 'Press :enterKey'
     this.multipleChoiceHelpText = 'Choose as many as you like'
     this.multipleChoiceHelpTextSingle = 'Choose only one answer'