Add subscription form validation

src/static/scripts/subscriptions.js

@@ -15,6 +15,7 @@ class SubscriptionForm {
         this.total_quantity_input = this.form.querySelector('input[name=total_quantity]')
         this.total_weight_input = this.form.querySelector('input[name=total_weight]')
         this.products_and_quantities = this.form.querySelector('input[name=products_and_quantities]')
+        this.submitBtn = this.form.querySelector('input[type=submit]')
 
         this.connect()
     }
@@ -22,9 +23,6 @@ class SubscriptionForm {
     connect() {
         this.form.addEventListener('change', this.change.bind(this))
         const formData = new FormData(this.form)
-        for (const input of formData) {
-            console.log(input)
-        }
     }
 
     change(event) {
@@ -49,10 +47,7 @@ class SubscriptionForm {
 
         this.checkMaxQuantity()
 
-        console.log(`${this.stripe_price_input.name}: ${this.stripe_price_input.value}`)
-        console.log(`${this.total_weight_input.name}: ${this.total_weight_input.value}`)
-        console.log(`${this.total_quantity_input.name}: ${this.total_quantity_input.value}`)
-        console.log(`${this.products_and_quantities.name}: ${this.products_and_quantities.value}`)
+        this.submitBtn.disabled = !this.isValid
     }
 
     checkMaxQuantity() {
@@ -69,6 +64,28 @@ class SubscriptionForm {
         }
     }
 
+    get isValid() {
+        return this.validate();
+    }
+
+    validate() {
+        const inputs = new Set();
+        [this.stripe_price_input,
+        this.total_quantity_input,
+        this.total_weight_input,
+        this.products_and_quantities].forEach(input => {
+            if (input.value == '') {
+                inputs.add(false)
+            }
+        });
+        if (this.total_qty < 1) {
+            inputs.add(false)
+        }
+        const valid = (inputs.has(false)) ? false : true;
+
+        return valid;
+    }
+
     get total_qty() {
         return Array.from(this.products).reduce((total, current) => {
             return total + Number(current.value)

src/storefront/templates/storefront/subscription/form.html

@@ -53,7 +53,7 @@
             <section>
                 <table class="subscription-totals"></table>
                 <p>
-                    <input type="submit" value="Continue">
+                    <input type="submit" value="Continue" disabled>
                 </p>
             </section>
         </form>