validate each step of setup wizard before next

models/doctype/AccountingSettings/AccountingSettings.js

@@ -23,14 +23,6 @@ module.exports = {
             fieldtype: "Account"
         },
 
-        {
-            "fieldname": "file",
-            "label": "File",
-            "fieldtype": "Data",
-            "required": 1,
-            "directory": 1
-        },
-
         {
             "fieldname": "country",
             "label": "Country",
@@ -53,13 +45,6 @@ module.exports = {
             "required": 1
         },
 
-        {
-            "fieldname": "abbreviation",
-            "label": "Abbreviation",
-            "fieldtype": "Data",
-            "required": 1
-        },
-
         {
             "fieldname": "bankName",
             "label": "Bank Name",

setup/config.js

@@ -30,7 +30,8 @@ module.exports = {
             "fieldname": "email",
             "label": "Email",
             "fieldtype": "Data",
-            "required": 1
+            "required": 1,
+            "inputType": "email"
         },
 
         {
@@ -40,13 +41,6 @@ module.exports = {
             "required": 1
         },
 
-        {
-            "fieldname": "abbreviation",
-            "label": "Abbreviation",
-            "fieldtype": "Data",
-            "required": 1
-        },
-
         {
             "fieldname": "bankName",
             "label": "Bank Name",
@@ -73,14 +67,7 @@ module.exports = {
 
         {
             title: 'Add your Company',
-            columns: [
-                {
-                    fields: ['companyName', 'bankName']
-                },
-                {
-                    fields: ['abbreviation']
-                },
-            ]
+            fields: ['companyName', 'bankName']
         }
     ]
 }

setup/index.js

@@ -89,7 +89,29 @@ module.exports = class SetupWizard {
 	}
 
 	nextSlide() {
-		this.showSlide(this.currentIndex + 1);
+		const isValid = this.validateCurrentSlide();
+		frappe.ui.toggleClass(this.formLayout.sections[this.currentIndex], 'was-validated', !isValid);
+
+		if (isValid) {
+			this.showSlide(this.currentIndex + 1);
+		}
+	}
+
+	validateCurrentSlide() {
+		const fields = this.getFieldsInSlide(this.currentIndex);
+		const inputValidityMap = fields.map(field => this.formLayout.controls[field].input.checkValidity());
+		const isValid = !inputValidityMap.includes(false);
+		return isValid;
+	}
+
+	getFieldsInSlide(index) {
+		const visibleSection = slideConfigs.layout[index];
+		const fieldsInSlide = visibleSection.fields ||
+			visibleSection.columns.reduce(
+				(col, fields) => fields.concat(col.fields), []
+			);
+
+		return fieldsInSlide;
 	}
 
 	activateIndicator(index) {

www/dist/css/style.css

@@ -7587,3 +7587,5 @@ input[type=file] {
   overflow: hidden;
   position: absolute;
   z-index: -1; }
+.was-validated input[type=file]:invalid + button {
+  border-color: #dc3545; }