From 2788ff2ee41f7058ee91cc1ff59f861ec58c251b Mon Sep 17 00:00:00 2001
From: Yvo Brevoort <yvo@muze.nl>
Date: Sat, 12 Jul 2025 11:36:26 +0200
Subject: [PATCH] check if all required fields have been entered before
 allowing a save. focus the first invalid element (and open the details if
 needed)

---
 .../componentTemplates/componentActions.html  |   2 +-
 .../componentTemplates/componentBodyHtml.html |   2 +-
 .../componentBuilderTemplate.html             |   2 +-
 .../componentTemplates/componentCommands.html |   2 +-
 .../componentComponentCss.html                |   2 +-
 .../componentComponentTemplate.html           |   2 +-
 .../componentTemplates/componentDataApi.html  |   2 +-
 .../componentDataSources.html                 |   2 +-
 .../componentTemplates/componentFootHtml.html |   2 +-
 .../componentTemplates/componentHeadHtml.html |   2 +-
 .../componentTemplates/componentPageCss.html  |   2 +-
 .../componentPageTemplate.html                |   2 +-
 .../componentQUnitTests.html                  |   2 +-
 .../componentTemplates/componentRawApi.html   |   2 +-
 .../componentTemplates/componentRoutes.html   |   2 +-
 .../componentShortcuts.html                   |   2 +-
 .../componentTemplates/componentSorters.html  |   2 +-
 .../componentTransformers.html                |   2 +-
 .../commands/preSaveCheck.js                  |  15 +
 generated.html                                | 271 +++++++++++-------
 .../commands/saveBaseComponent.js             |   3 +
 .../pageTemplates/Edit base component.html    |  20 +-
 .../commands/createBaseComponent.js           |   3 +
 .../pageTemplates/Base components.html        |  28 +-
 pages/builder/commands/saveBuilder.js         |   3 +
 pages/builder/pageTemplates/Edit builder.html |   6 +-
 pages/builders/commands/createBuilder.js      |   3 +
 pages/builders/pageTemplates/Builders.html    |  28 +-
 .../commands/createComponent.js               |   3 +
 .../pageTemplates/List components.html        |  32 ++-
 pages/component/commands/saveComponent.js     |   3 +
 .../pageTemplates/Edit component.html         |  24 +-
 .../pageTemplates/Edit page frame.html        |   6 +-
 pages/page/commands/savePage.js               |   3 +
 pages/page/pageTemplates/Edit page.html       |  24 +-
 pages/pages/commands/createPage.js            |   3 +
 pages/pages/pageTemplates/Pages.html          |  30 +-
 37 files changed, 328 insertions(+), 216 deletions(-)
 create mode 100644 components/components-generic/commands/preSaveCheck.js

diff --git a/components/component-actions/componentTemplates/componentActions.html b/components/component-actions/componentTemplates/componentActions.html
index a60b912..5b42b2a 100644
--- a/components/component-actions/componentTemplates/componentActions.html
+++ b/components/component-actions/componentTemplates/componentActions.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
+            <input class="simplycode-tab" required data-simply-field="action" placeholder="Action name, eg getItemList">
             <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
diff --git a/components/component-body-html/componentTemplates/componentBodyHtml.html b/components/component-body-html/componentTemplates/componentBodyHtml.html
index 61c454c..eedd0c9 100644
--- a/components/component-body-html/componentTemplates/componentBodyHtml.html
+++ b/components/component-body-html/componentTemplates/componentBodyHtml.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
+            <input class="simplycode-tab" required data-simply-field="name" placeholder="Name">
           </div>
           <div class="simplycode-options">
 			<button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-builder-template/componentTemplates/componentBuilderTemplate.html b/components/component-builder-template/componentTemplates/componentBuilderTemplate.html
index 2a96537..c63ab26 100644
--- a/components/component-builder-template/componentTemplates/componentBuilderTemplate.html
+++ b/components/component-builder-template/componentTemplates/componentBuilderTemplate.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="builder" placeholder="Builder name">
+            <input class="simplycode-tab" data-simply-field="builder" required placeholder="Builder name">
             <label class="simplycode-tab">
               <input type="radio" name="builderEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
diff --git a/components/component-commands/componentTemplates/componentCommands.html b/components/component-commands/componentTemplates/componentCommands.html
index e306976..a11b54c 100644
--- a/components/component-commands/componentTemplates/componentCommands.html
+++ b/components/component-commands/componentTemplates/componentCommands.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
+            <input class="simplycode-tab" data-simply-field="command" required placeholder="Command name, eg getItemList">
             <label class="simplycode-tab">
               <input type="radio" name="commandEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
diff --git a/components/component-component-css/componentTemplates/componentComponentCss.html b/components/component-component-css/componentTemplates/componentComponentCss.html
index a2456f6..dfb45df 100644
--- a/components/component-component-css/componentTemplates/componentComponentCss.html
+++ b/components/component-component-css/componentTemplates/componentComponentCss.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
+            <input class="simplycode-tab" data-simply-field="name" required placeholder="Name this CSS collection">
           </div>
           <div class="simplycode-options">
 			<button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-component-html/componentTemplates/componentComponentTemplate.html b/components/component-component-html/componentTemplates/componentComponentTemplate.html
index 18be07c..39bb6ad 100644
--- a/components/component-component-html/componentTemplates/componentComponentTemplate.html
+++ b/components/component-component-html/componentTemplates/componentComponentTemplate.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="component" placeholder="Component name">
+            <input class="simplycode-tab" data-simply-field="component" required placeholder="Component name">
             <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
diff --git a/components/component-data-api/componentTemplates/componentDataApi.html b/components/component-data-api/componentTemplates/componentDataApi.html
index e088ce6..8565102 100644
--- a/components/component-data-api/componentTemplates/componentDataApi.html
+++ b/components/component-data-api/componentTemplates/componentDataApi.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+            <input class="simplycode-tab" data-simply-field="method" required placeholder="API method name, eg getItemList">
           </div>
           <div class="simplycode-options">
 			<button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-data-sources/componentTemplates/componentDataSources.html b/components/component-data-sources/componentTemplates/componentDataSources.html
index a30c43c..05e93f9 100644
--- a/components/component-data-sources/componentTemplates/componentDataSources.html
+++ b/components/component-data-sources/componentTemplates/componentDataSources.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="dataSource" placeholder="Data source name, eg itemList">
+            <input class="simplycode-tab" data-simply-field="dataSource" required placeholder="Data source name, eg itemList">
             <label class="simplycode-tab" title="Load code is used to fetch the data source and render it in the list. Save code is used to gather data from the data source and save it back to where it came from.">
               <input type="radio" checked name="dataSourceEditor" value="code" data-simply-field="editor">
               <span>Load/Save</span>
diff --git a/components/component-foot-html/componentTemplates/componentFootHtml.html b/components/component-foot-html/componentTemplates/componentFootHtml.html
index af9d496..ad4af57 100644
--- a/components/component-foot-html/componentTemplates/componentFootHtml.html
+++ b/components/component-foot-html/componentTemplates/componentFootHtml.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
+            <input class="simplycode-tab" data-simply-field="name" required placeholder="Name">
           </div>
           <div class="simplycode-options">
 			<button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-head-html/componentTemplates/componentHeadHtml.html b/components/component-head-html/componentTemplates/componentHeadHtml.html
index ff083e3..761f2c4 100644
--- a/components/component-head-html/componentTemplates/componentHeadHtml.html
+++ b/components/component-head-html/componentTemplates/componentHeadHtml.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
+            <input class="simplycode-tab" data-simply-field="name" required placeholder="Name">
           </div>
           <div class="simplycode-options">
             <button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-page-css/componentTemplates/componentPageCss.html b/components/component-page-css/componentTemplates/componentPageCss.html
index d77f07a..0e114a1 100644
--- a/components/component-page-css/componentTemplates/componentPageCss.html
+++ b/components/component-page-css/componentTemplates/componentPageCss.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
+            <input class="simplycode-tab" data-simply-field="name" required placeholder="Name this CSS collection">
           </div>
           <div class="simplycode-options">
             <button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-page-template/componentTemplates/componentPageTemplate.html b/components/component-page-template/componentTemplates/componentPageTemplate.html
index 42ee026..acc9932 100644
--- a/components/component-page-template/componentTemplates/componentPageTemplate.html
+++ b/components/component-page-template/componentTemplates/componentPageTemplate.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="page" placeholder="Page name">
+            <input class="simplycode-tab" data-simply-field="page" required placeholder="Page name">
             <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
diff --git a/components/component-qunit-tests/componentTemplates/componentQUnitTests.html b/components/component-qunit-tests/componentTemplates/componentQUnitTests.html
index 35bd54e..d65c497 100644
--- a/components/component-qunit-tests/componentTemplates/componentQUnitTests.html
+++ b/components/component-qunit-tests/componentTemplates/componentQUnitTests.html
@@ -4,7 +4,7 @@
       <div class="simplycode-test" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-test-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="name" placeholder="Test name">
+            <input class="simplycode-tab" data-simply-field="name" required placeholder="Test name">
           </div>
           <div class="simplycode-options">
             <button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-raw-api/componentTemplates/componentRawApi.html b/components/component-raw-api/componentTemplates/componentRawApi.html
index fa4e99c..b42dae2 100644
--- a/components/component-raw-api/componentTemplates/componentRawApi.html
+++ b/components/component-raw-api/componentTemplates/componentRawApi.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+            <input class="simplycode-tab" data-simply-field="method" required placeholder="API method name, eg getItemList">
           </div>
           <div class="simplycode-options">
             <button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-routes/componentTemplates/componentRoutes.html b/components/component-routes/componentTemplates/componentRoutes.html
index 7a34308..4690d18 100644
--- a/components/component-routes/componentTemplates/componentRoutes.html
+++ b/components/component-routes/componentTemplates/componentRoutes.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="name" placeholder="Name of the route">
+            <input class="simplycode-tab" data-simply-field="name" required placeholder="Name of the route">
             <input class="simplycode-tab" data-simply-field="route" placeholder="#route/:variable">
           </div>
           <div class="simplycode-options">
diff --git a/components/component-shortcuts/componentTemplates/componentShortcuts.html b/components/component-shortcuts/componentTemplates/componentShortcuts.html
index ff0edca..7beba92 100644
--- a/components/component-shortcuts/componentTemplates/componentShortcuts.html
+++ b/components/component-shortcuts/componentTemplates/componentShortcuts.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="shortcut" placeholder="shortcut-key">
+            <input class="simplycode-tab" data-simply-field="shortcut" required placeholder="shortcut-key">
             <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
diff --git a/components/component-sorters/componentTemplates/componentSorters.html b/components/component-sorters/componentTemplates/componentSorters.html
index af41fe6..d703f97 100644
--- a/components/component-sorters/componentTemplates/componentSorters.html
+++ b/components/component-sorters/componentTemplates/componentSorters.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="sorter" placeholder="Sorter name, eg sortByDescription">
+            <input class="simplycode-tab" data-simply-field="sorter" required placeholder="Sorter name, eg sortByDescription">
           </div>
           <div class="simplycode-options">
             <button class="simplycode-button" draggable="true">Drag to move</button>
diff --git a/components/component-transformers/componentTemplates/componentTransformers.html b/components/component-transformers/componentTemplates/componentTransformers.html
index f255f58..67dffe5 100644
--- a/components/component-transformers/componentTemplates/componentTransformers.html
+++ b/components/component-transformers/componentTemplates/componentTransformers.html
@@ -12,7 +12,7 @@
       <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
         <div class="simplycode-part-header">
           <div class="simplycode-tabs">
-            <input class="simplycode-tab" data-simply-field="transformer" placeholder="Transformer name, eg itemNameFromId">
+            <input class="simplycode-tab" data-simply-field="transformer" required placeholder="Transformer name, eg itemNameFromId">
             <label class="simplycode-tab" title="Render code transforms the data from what is stored into what the user sees. Extract takes the data as provided from the DOM and transforms it for storage">
               <input type="radio" checked name="transformerEditor" value="code" data-simply-field="editor">
               <span>Render/Extract</span>
diff --git a/components/components-generic/commands/preSaveCheck.js b/components/components-generic/commands/preSaveCheck.js
new file mode 100644
index 0000000..2015af8
--- /dev/null
+++ b/components/components-generic/commands/preSaveCheck.js
@@ -0,0 +1,15 @@
+function(el) {
+  if (document.querySelector(":invalid")) {
+    editor.pageData.alerts.unshift({
+      "data-simply-template" : "error",
+      "message" : "Not all required fields have been filled out.",
+      "state" : "new"
+    });
+    document.querySelectorAll("details:has(:invalid)").forEach(function(item) {
+      item.setAttribute("open", true);
+    });
+    document.querySelector(":invalid:not(form)").focus();
+    return false;
+  }
+  return true;
+}
\ No newline at end of file
diff --git a/generated.html b/generated.html
index 419e1aa..e59c469 100644
--- a/generated.html
+++ b/generated.html
@@ -3126,6 +3126,21 @@
               simplyApp.commands.autoRunTests();
               simplyApp.commands.autoRunPreviews();
             },
+            "preSaveCheck" : function(el) {
+              if (document.querySelector(":invalid")) {
+                editor.pageData.alerts.unshift({
+                  "data-simply-template" : "error",
+                  "message" : "Not all required fields have been filled out.",
+                  "state" : "new"
+                });
+                document.querySelectorAll("details:has(:invalid)").forEach(function(item) {
+                  item.setAttribute("open", true);
+                });
+                document.querySelector(":invalid:not(form)").focus();
+                return false;
+              }
+              return true;
+            },
             "collapseMenu" : function(el) {
               if (!el.hasAttribute("open")) {
                 return simplyApp.commands.expandMenu(el);
@@ -3183,6 +3198,9 @@
               });
             },
             "saveBaseComponent" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               simplyApp.actions.saveBaseComponent(editor.pageData.component)
                 .then(function() {
                 editor.pageData.alerts.unshift({
@@ -3193,6 +3211,9 @@
               });
             },
             "createBaseComponent" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               var newComponent = editor.pageData.newComponent;
               simplyApp.actions.saveBaseComponent(newComponent)
                 .then(function() {
@@ -3221,6 +3242,9 @@
               });
             },
             "saveBuilder" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               simplyApp.actions.saveBuilder(editor.pageData.component)
                 .then(function() {
                 editor.pageData.alerts.unshift({
@@ -3231,6 +3255,9 @@
               });
             },
             "createBuilder" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               var newComponent = editor.pageData.newComponent;
               simplyApp.actions.saveBuilder(newComponent)
                 .then(function() {
@@ -3259,6 +3286,9 @@
               });
             },
             "saveComponent" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               simplyApp.actions.saveComponent(editor.pageData.component)
               .then(function() {
                 editor.pageData.alerts.unshift({
@@ -3269,6 +3299,9 @@
               });
             },
             "createComponent" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               var newComponent = editor.pageData.newComponent;
               simplyApp.actions.saveComponent(newComponent)
                 .then(function() {
@@ -3297,6 +3330,9 @@
               });
             },
             "savePage" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               simplyApp.actions.savePage(editor.pageData.component)
                 .then(function() {
                 editor.pageData.alerts.unshift({
@@ -3317,6 +3353,9 @@
               });
             },
             "createPage" : function() {
+              if (!simplyApp.commands.preSaveCheck()) {
+                return;
+              }
               var newComponent = editor.pageData.newComponent;
               simplyApp.actions.savePage(newComponent)
                 .then(function() {
@@ -3770,7 +3809,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
+                <input class="simplycode-tab" required data-simply-field="action" placeholder="Action name, eg getItemList">
                 <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
@@ -3818,7 +3857,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
+                <input class="simplycode-tab" required data-simply-field="name" placeholder="Name">
               </div>
               <div class="simplycode-options">
     			<button class="simplycode-button" draggable="true">Drag to move</button>
@@ -3851,7 +3890,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="builder" placeholder="Builder name">
+                <input class="simplycode-tab" data-simply-field="builder" required placeholder="Builder name">
                 <label class="simplycode-tab">
                   <input type="radio" name="builderEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
@@ -3889,7 +3928,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
+                <input class="simplycode-tab" data-simply-field="command" required placeholder="Command name, eg getItemList">
                 <label class="simplycode-tab">
                   <input type="radio" name="commandEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
@@ -3938,7 +3977,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
+                <input class="simplycode-tab" data-simply-field="name" required placeholder="Name this CSS collection">
               </div>
               <div class="simplycode-options">
     			<button class="simplycode-button" draggable="true">Drag to move</button>
@@ -3970,7 +4009,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="component" placeholder="Component name">
+                <input class="simplycode-tab" data-simply-field="component" required placeholder="Component name">
                 <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
@@ -4019,7 +4058,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+                <input class="simplycode-tab" data-simply-field="method" required placeholder="API method name, eg getItemList">
               </div>
               <div class="simplycode-options">
     			<button class="simplycode-button" draggable="true">Drag to move</button>
@@ -4051,7 +4090,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="dataSource" placeholder="Data source name, eg itemList">
+                <input class="simplycode-tab" data-simply-field="dataSource" required placeholder="Data source name, eg itemList">
                 <label class="simplycode-tab" title="Load code is used to fetch the data source and render it in the list. Save code is used to gather data from the data source and save it back to where it came from.">
                   <input type="radio" checked name="dataSourceEditor" value="code" data-simply-field="editor">
                   <span>Load/Save</span>
@@ -4136,7 +4175,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
+                <input class="simplycode-tab" data-simply-field="name" required placeholder="Name">
               </div>
               <div class="simplycode-options">
     			<button class="simplycode-button" draggable="true">Drag to move</button>
@@ -4169,7 +4208,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
+                <input class="simplycode-tab" data-simply-field="name" required placeholder="Name">
               </div>
               <div class="simplycode-options">
                 <button class="simplycode-button" draggable="true">Drag to move</button>
@@ -4202,7 +4241,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
+                <input class="simplycode-tab" data-simply-field="name" required placeholder="Name this CSS collection">
               </div>
               <div class="simplycode-options">
                 <button class="simplycode-button" draggable="true">Drag to move</button>
@@ -4288,7 +4327,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="page" placeholder="Page name">
+                <input class="simplycode-tab" data-simply-field="page" required placeholder="Page name">
                 <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
@@ -4468,7 +4507,7 @@
           <div class="simplycode-test" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-test-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="name" placeholder="Test name">
+                <input class="simplycode-tab" data-simply-field="name" required placeholder="Test name">
               </div>
               <div class="simplycode-options">
                 <button class="simplycode-button" draggable="true">Drag to move</button>
@@ -4499,7 +4538,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="method" placeholder="API method name, eg getItemList">
+                <input class="simplycode-tab" data-simply-field="method" required placeholder="API method name, eg getItemList">
               </div>
               <div class="simplycode-options">
                 <button class="simplycode-button" draggable="true">Drag to move</button>
@@ -4531,7 +4570,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="name" placeholder="Name of the route">
+                <input class="simplycode-tab" data-simply-field="name" required placeholder="Name of the route">
                 <input class="simplycode-tab" data-simply-field="route" placeholder="#route/:variable">
               </div>
               <div class="simplycode-options">
@@ -4564,7 +4603,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="shortcut" placeholder="shortcut-key">
+                <input class="simplycode-tab" data-simply-field="shortcut" required placeholder="shortcut-key">
                 <label class="simplycode-tab">
                   <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
                   <span>Code</span>
@@ -4612,7 +4651,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="sorter" placeholder="Sorter name, eg sortByDescription">
+                <input class="simplycode-tab" data-simply-field="sorter" required placeholder="Sorter name, eg sortByDescription">
               </div>
               <div class="simplycode-options">
                 <button class="simplycode-button" draggable="true">Drag to move</button>
@@ -4644,7 +4683,7 @@
           <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
             <div class="simplycode-part-header">
               <div class="simplycode-tabs">
-                <input class="simplycode-tab" data-simply-field="transformer" placeholder="Transformer name, eg itemNameFromId">
+                <input class="simplycode-tab" data-simply-field="transformer" required placeholder="Transformer name, eg itemNameFromId">
                 <label class="simplycode-tab" title="Render code transforms the data from what is stored into what the user sees. Extract takes the data as provided from the DOM and transforms it for storage">
                   <input type="radio" checked name="transformerEditor" value="code" data-simply-field="editor">
                   <span>Render/Extract</span>
@@ -5002,15 +5041,17 @@
       <div class="simplycode-header">
         <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentHeadHtml"></simply-render>
-      <simply-render rel="componentBodyHtml"></simply-render>
-      <simply-render rel="componentFootHtml"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentShortcuts"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentRawApi"></simply-render>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentHeadHtml"></simply-render>
+        <simply-render rel="componentBodyHtml"></simply-render>
+        <simply-render rel="componentFootHtml"></simply-render>
+        <simply-render rel="componentCommands"></simply-render>
+        <simply-render rel="componentShortcuts"></simply-render>
+        <simply-render rel="componentActions"></simply-render>
+        <simply-render rel="componentRoutes"></simply-render>
+        <simply-render rel="componentRawApi"></simply-render>
+      </form>
     </main>
     </template>
     <template data-simply-template="Base components">
@@ -5024,22 +5065,24 @@ <h3 data-simply-field="id"></h3>
           </a>
         </template>
       </div>
-      <h1>Add base component</h1>
-      <div class="simplycode-part">
-        <div class="simplycode-part-header">
-          <div class="simplycode-tabs">
-            <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
-          </div>
-          <div class="simplycode-options">
-            <button class="simplycode-button" data-simply-command="createBaseComponent">Create</button>
+      <form action="#">
+        <h1>Add base component</h1>
+        <div class="simplycode-part">
+          <div class="simplycode-part-header">
+            <div class="simplycode-tabs">
+              <input data-simply-field="newComponent.id" class="simplycode-tab" required placeholder="Name your component">
+            </div>
+            <div class="simplycode-options">
+              <button class="simplycode-button" data-simply-command="createBaseComponent">Create</button>
+            </div>
           </div>
-        </div>
-        <div class="simplycode-editors">
-          <div class="simplycode-editor-code">
-            <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+          <div class="simplycode-editors">
+            <div class="simplycode-editor-code">
+              <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+            </div>
           </div>
         </div>
-      </div>
+      </form>
     </main>
     </template>
     <template data-simply-template="Edit builder">
@@ -5047,8 +5090,10 @@ <h1>Add base component</h1>
       <div class="simplycode-header">
         <h1>Edit builder: <span data-simply-field="component.id"></span></h1>
       </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentBuilderTemplate"></simply-render>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentBuilderTemplate"></simply-render>
+      </form>
     </main>
     </template>
     <template data-simply-template="Builders">
@@ -5062,22 +5107,24 @@ <h3 data-simply-field="id"></h3>
           </a>
         </template>
       </div>
-      <h1>Add builder</h1>
-      <div class="simplycode-part">
-        <div class="simplycode-part-header">
-          <div class="simplycode-tabs">
-            <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
-          </div>
-          <div class="simplycode-options">
-            <button class="simplycode-button" data-simply-command="createBuilder">Create</button>
+      <form action="#">
+        <h1>Add builder</h1>
+        <div class="simplycode-part">
+          <div class="simplycode-part-header">
+            <div class="simplycode-tabs">
+              <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+            </div>
+            <div class="simplycode-options">
+              <button class="simplycode-button" data-simply-command="createBuilder">Create</button>
+            </div>
           </div>
-        </div>
-        <div class="simplycode-editors">
-          <div class="simplycode-editor-code">
-            <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+          <div class="simplycode-editors">
+            <div class="simplycode-editor-code">
+              <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+            </div>
           </div>
         </div>
-      </div>
+      </form>
     </main>
     
     </template>
@@ -5086,17 +5133,19 @@ <h1>Add builder</h1>
       <div class="simplycode-header">
         <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentComponentTemplate"></simply-render>
-      <simply-render rel="componentComponentCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentShortcuts"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentComponentTemplate"></simply-render>
+        <simply-render rel="componentComponentCss"></simply-render>
+        <simply-render rel="componentCommands"></simply-render>
+        <simply-render rel="componentShortcuts"></simply-render>
+        <simply-render rel="componentActions"></simply-render>
+        <simply-render rel="componentDataApi"></simply-render>
+        <simply-render rel="componentRoutes"></simply-render>
+        <simply-render rel="componentTransformers"></simply-render>
+        <simply-render rel="componentDataSources"></simply-render>
+        <simply-render rel="componentSorters"></simply-render>
+      </form>
     </main>
     </template>
     <template data-simply-template="List components">
@@ -5104,47 +5153,50 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       <h1>Components</h1>
       <div class="simplycode-component-list" data-simply-list="components">
         <template>
-          <a class="simplycode-component-list-item data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
+          <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
             <h3 data-simply-field="id"></h3>
             <p class="ds-margin-up" data-simply-field="description"></p>
           </a>
         </template>
       </div>
-      <h1>Add component</h1>
-      <div class="simplycode-part">
-        <div class="simplycode-part-header">
-          <div class="simplycode-tabs">
-            <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
-          </div>
-          <div class="simplycode-options">
-            <button class="simplycode-button" data-simply-command="createComponent">Create</button>
+      <form action="#">
+        <h1>Add component</h1>
+        <div class="simplycode-part">
+          <div class="simplycode-part-header">
+            <div class="simplycode-tabs">
+              <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+            </div>
+            <div class="simplycode-options">
+              <button class="simplycode-button" data-simply-command="createComponent">Create</button>
+            </div>
           </div>
-        </div>
-        <div class="simplycode-editors">
-          <div class="simplycode-editor-code">
-            <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+          <div class="simplycode-editors">
+            <div class="simplycode-editor-code">
+              <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+            </div>
           </div>
         </div>
-      </div>
+      </form>
     </main>
-    
     </template>
     <template data-simply-template="Edit page">
       <main>
       <div class="simplycode-header">
         <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageTemplate"></simply-render>
-      <simply-render rel="componentPageCss"></simply-render>
-      <simply-render rel="componentCommands"></simply-render>
-      <simply-render rel="componentShortcuts"></simply-render>
-      <simply-render rel="componentActions"></simply-render>
-      <simply-render rel="componentDataApi"></simply-render>
-      <simply-render rel="componentRoutes"></simply-render>
-      <simply-render rel="componentTransformers"></simply-render>
-      <simply-render rel="componentDataSources"></simply-render>
-      <simply-render rel="componentSorters"></simply-render>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentPageTemplate"></simply-render>
+        <simply-render rel="componentPageCss"></simply-render>
+        <simply-render rel="componentCommands"></simply-render>
+        <simply-render rel="componentShortcuts"></simply-render>
+        <simply-render rel="componentActions"></simply-render>
+        <simply-render rel="componentDataApi"></simply-render>
+        <simply-render rel="componentRoutes"></simply-render>
+        <simply-render rel="componentTransformers"></simply-render>
+        <simply-render rel="componentDataSources"></simply-render>
+        <simply-render rel="componentSorters"></simply-render>
+      </form>
     </main>
     </template>
     <template data-simply-template="Edit page frame">
@@ -5152,8 +5204,10 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       <div class="simplycode-header">
         <h1>Edit page frame</h1>
       </div>
-      <simply-render rel="componentDescription"></simply-render>
-      <simply-render rel="componentPageFrame"></simply-render>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentPageFrame"></simply-render>
+      </form>
     </main>
     </template>
     <template data-simply-template="Pages">
@@ -5167,24 +5221,25 @@ <h3 data-simply-field="id"></h3>
           </a>
         </template>
       </div>
-      <h1>Add page</h1>
-      <div class="simplycode-part">
-        <div class="simplycode-part-header">
-          <div class="simplycode-tabs">
-            <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
-          </div>
-          <div class="simplycode-options">
-            <button class="simplycode-button" data-simply-command="createPage">Create</button>
+      <form action="#">
+        <h1>Add page</h1>
+        <div class="simplycode-part">
+          <div class="simplycode-part-header">
+            <div class="simplycode-tabs">
+              <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+            </div>
+            <div class="simplycode-options">
+              <button class="simplycode-button" data-simply-command="createPage">Create</button>
+            </div>
           </div>
-        </div>
-        <div class="simplycode-editors">
-          <div class="simplycode-editor-code">
-            <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+          <div class="simplycode-editors">
+            <div class="simplycode-editor-code">
+              <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+            </div>
           </div>
         </div>
-      </div>
+      </form>
     </main>
-    
     </template>
     <template data-simply-template="preview-app">
       <main class="simplycode-fullscreen-preview">
diff --git a/pages/base-component/commands/saveBaseComponent.js b/pages/base-component/commands/saveBaseComponent.js
index fd3dbf9..3caeb11 100644
--- a/pages/base-component/commands/saveBaseComponent.js
+++ b/pages/base-component/commands/saveBaseComponent.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   simplyApp.actions.saveBaseComponent(editor.pageData.component)
     .then(function() {
     editor.pageData.alerts.unshift({
diff --git a/pages/base-component/pageTemplates/Edit base component.html b/pages/base-component/pageTemplates/Edit base component.html
index 9ac98c4..780b81f 100644
--- a/pages/base-component/pageTemplates/Edit base component.html	
+++ b/pages/base-component/pageTemplates/Edit base component.html	
@@ -2,13 +2,15 @@
   <div class="simplycode-header">
     <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
   </div>
-  <simply-render rel="componentDescription"></simply-render>
-  <simply-render rel="componentHeadHtml"></simply-render>
-  <simply-render rel="componentBodyHtml"></simply-render>
-  <simply-render rel="componentFootHtml"></simply-render>
-  <simply-render rel="componentCommands"></simply-render>
-  <simply-render rel="componentShortcuts"></simply-render>
-  <simply-render rel="componentActions"></simply-render>
-  <simply-render rel="componentRoutes"></simply-render>
-  <simply-render rel="componentRawApi"></simply-render>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentHeadHtml"></simply-render>
+    <simply-render rel="componentBodyHtml"></simply-render>
+    <simply-render rel="componentFootHtml"></simply-render>
+    <simply-render rel="componentCommands"></simply-render>
+    <simply-render rel="componentShortcuts"></simply-render>
+    <simply-render rel="componentActions"></simply-render>
+    <simply-render rel="componentRoutes"></simply-render>
+    <simply-render rel="componentRawApi"></simply-render>
+  </form>
 </main>
\ No newline at end of file
diff --git a/pages/base-components/commands/createBaseComponent.js b/pages/base-components/commands/createBaseComponent.js
index ebad848..b2ed58f 100644
--- a/pages/base-components/commands/createBaseComponent.js
+++ b/pages/base-components/commands/createBaseComponent.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   var newComponent = editor.pageData.newComponent;
   simplyApp.actions.saveBaseComponent(newComponent)
     .then(function() {
diff --git a/pages/base-components/pageTemplates/Base components.html b/pages/base-components/pageTemplates/Base components.html
index aaf7494..49c89ef 100644
--- a/pages/base-components/pageTemplates/Base components.html	
+++ b/pages/base-components/pageTemplates/Base components.html	
@@ -8,20 +8,22 @@ <h3 data-simply-field="id"></h3>
       </a>
     </template>
   </div>
-  <h1>Add base component</h1>
-  <div class="simplycode-part">
-    <div class="simplycode-part-header">
-      <div class="simplycode-tabs">
-        <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+  <form action="#">
+    <h1>Add base component</h1>
+    <div class="simplycode-part">
+      <div class="simplycode-part-header">
+        <div class="simplycode-tabs">
+          <input data-simply-field="newComponent.id" class="simplycode-tab" required placeholder="Name your component">
+        </div>
+        <div class="simplycode-options">
+          <button class="simplycode-button" data-simply-command="createBaseComponent">Create</button>
+        </div>
       </div>
-      <div class="simplycode-options">
-        <button class="simplycode-button" data-simply-command="createBaseComponent">Create</button>
+      <div class="simplycode-editors">
+        <div class="simplycode-editor-code">
+          <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+        </div>
       </div>
     </div>
-    <div class="simplycode-editors">
-      <div class="simplycode-editor-code">
-        <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
-      </div>
-    </div>
-  </div>
+  </form>
 </main>
\ No newline at end of file
diff --git a/pages/builder/commands/saveBuilder.js b/pages/builder/commands/saveBuilder.js
index e9e4930..838e6ec 100644
--- a/pages/builder/commands/saveBuilder.js
+++ b/pages/builder/commands/saveBuilder.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   simplyApp.actions.saveBuilder(editor.pageData.component)
     .then(function() {
     editor.pageData.alerts.unshift({
diff --git a/pages/builder/pageTemplates/Edit builder.html b/pages/builder/pageTemplates/Edit builder.html
index 39c3bfe..978a61f 100644
--- a/pages/builder/pageTemplates/Edit builder.html	
+++ b/pages/builder/pageTemplates/Edit builder.html	
@@ -2,6 +2,8 @@
   <div class="simplycode-header">
     <h1>Edit builder: <span data-simply-field="component.id"></span></h1>
   </div>
-  <simply-render rel="componentDescription"></simply-render>
-  <simply-render rel="componentBuilderTemplate"></simply-render>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentBuilderTemplate"></simply-render>
+  </form>
 </main>
\ No newline at end of file
diff --git a/pages/builders/commands/createBuilder.js b/pages/builders/commands/createBuilder.js
index 749a560..f53e4df 100644
--- a/pages/builders/commands/createBuilder.js
+++ b/pages/builders/commands/createBuilder.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   var newComponent = editor.pageData.newComponent;
   simplyApp.actions.saveBuilder(newComponent)
     .then(function() {
diff --git a/pages/builders/pageTemplates/Builders.html b/pages/builders/pageTemplates/Builders.html
index 5ab4a09..c0c2038 100644
--- a/pages/builders/pageTemplates/Builders.html
+++ b/pages/builders/pageTemplates/Builders.html
@@ -8,20 +8,22 @@ <h3 data-simply-field="id"></h3>
       </a>
     </template>
   </div>
-  <h1>Add builder</h1>
-  <div class="simplycode-part">
-    <div class="simplycode-part-header">
-      <div class="simplycode-tabs">
-        <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+  <form action="#">
+    <h1>Add builder</h1>
+    <div class="simplycode-part">
+      <div class="simplycode-part-header">
+        <div class="simplycode-tabs">
+          <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+        </div>
+        <div class="simplycode-options">
+          <button class="simplycode-button" data-simply-command="createBuilder">Create</button>
+        </div>
       </div>
-      <div class="simplycode-options">
-        <button class="simplycode-button" data-simply-command="createBuilder">Create</button>
+      <div class="simplycode-editors">
+        <div class="simplycode-editor-code">
+          <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+        </div>
       </div>
     </div>
-    <div class="simplycode-editors">
-      <div class="simplycode-editor-code">
-        <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
-      </div>
-    </div>
-  </div>
+  </form>
 </main>
diff --git a/pages/component-list/commands/createComponent.js b/pages/component-list/commands/createComponent.js
index 126a98b..787233c 100644
--- a/pages/component-list/commands/createComponent.js
+++ b/pages/component-list/commands/createComponent.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   var newComponent = editor.pageData.newComponent;
   simplyApp.actions.saveComponent(newComponent)
     .then(function() {
diff --git a/pages/component-list/pageTemplates/List components.html b/pages/component-list/pageTemplates/List components.html
index 1ad2757..5b90b64 100644
--- a/pages/component-list/pageTemplates/List components.html	
+++ b/pages/component-list/pageTemplates/List components.html	
@@ -2,26 +2,28 @@
   <h1>Components</h1>
   <div class="simplycode-component-list" data-simply-list="components">
     <template>
-      <a class="simplycode-component-list-item data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
+      <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
         <h3 data-simply-field="id"></h3>
         <p class="ds-margin-up" data-simply-field="description"></p>
       </a>
     </template>
   </div>
-  <h1>Add component</h1>
-  <div class="simplycode-part">
-    <div class="simplycode-part-header">
-      <div class="simplycode-tabs">
-        <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+  <form action="#">
+    <h1>Add component</h1>
+    <div class="simplycode-part">
+      <div class="simplycode-part-header">
+        <div class="simplycode-tabs">
+          <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+        </div>
+        <div class="simplycode-options">
+          <button class="simplycode-button" data-simply-command="createComponent">Create</button>
+        </div>
       </div>
-      <div class="simplycode-options">
-        <button class="simplycode-button" data-simply-command="createComponent">Create</button>
+      <div class="simplycode-editors">
+        <div class="simplycode-editor-code">
+          <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+        </div>
       </div>
     </div>
-    <div class="simplycode-editors">
-      <div class="simplycode-editor-code">
-        <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
-      </div>
-    </div>
-  </div>
-</main>
+  </form>
+</main>
\ No newline at end of file
diff --git a/pages/component/commands/saveComponent.js b/pages/component/commands/saveComponent.js
index ac6cf80..e867788 100644
--- a/pages/component/commands/saveComponent.js
+++ b/pages/component/commands/saveComponent.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   simplyApp.actions.saveComponent(editor.pageData.component)
   .then(function() {
     editor.pageData.alerts.unshift({
diff --git a/pages/component/pageTemplates/Edit component.html b/pages/component/pageTemplates/Edit component.html
index bc1402f..d8ade6c 100644
--- a/pages/component/pageTemplates/Edit component.html	
+++ b/pages/component/pageTemplates/Edit component.html	
@@ -2,15 +2,17 @@
   <div class="simplycode-header">
     <h1>Edit component: <span data-simply-field="component.id"></span></h1>
   </div>
-  <simply-render rel="componentDescription"></simply-render>
-  <simply-render rel="componentComponentTemplate"></simply-render>
-  <simply-render rel="componentComponentCss"></simply-render>
-  <simply-render rel="componentCommands"></simply-render>
-  <simply-render rel="componentShortcuts"></simply-render>
-  <simply-render rel="componentActions"></simply-render>
-  <simply-render rel="componentDataApi"></simply-render>
-  <simply-render rel="componentRoutes"></simply-render>
-  <simply-render rel="componentTransformers"></simply-render>
-  <simply-render rel="componentDataSources"></simply-render>
-  <simply-render rel="componentSorters"></simply-render>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentComponentTemplate"></simply-render>
+    <simply-render rel="componentComponentCss"></simply-render>
+    <simply-render rel="componentCommands"></simply-render>
+    <simply-render rel="componentShortcuts"></simply-render>
+    <simply-render rel="componentActions"></simply-render>
+    <simply-render rel="componentDataApi"></simply-render>
+    <simply-render rel="componentRoutes"></simply-render>
+    <simply-render rel="componentTransformers"></simply-render>
+    <simply-render rel="componentDataSources"></simply-render>
+    <simply-render rel="componentSorters"></simply-render>
+  </form>
 </main>
\ No newline at end of file
diff --git a/pages/page-frame/pageTemplates/Edit page frame.html b/pages/page-frame/pageTemplates/Edit page frame.html
index 4e652f4..01ca2a9 100644
--- a/pages/page-frame/pageTemplates/Edit page frame.html	
+++ b/pages/page-frame/pageTemplates/Edit page frame.html	
@@ -2,6 +2,8 @@
   <div class="simplycode-header">
     <h1>Edit page frame</h1>
   </div>
-  <simply-render rel="componentDescription"></simply-render>
-  <simply-render rel="componentPageFrame"></simply-render>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentPageFrame"></simply-render>
+  </form>
 </main>
\ No newline at end of file
diff --git a/pages/page/commands/savePage.js b/pages/page/commands/savePage.js
index d3666fe..edda660 100644
--- a/pages/page/commands/savePage.js
+++ b/pages/page/commands/savePage.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   simplyApp.actions.savePage(editor.pageData.component)
     .then(function() {
     editor.pageData.alerts.unshift({
diff --git a/pages/page/pageTemplates/Edit page.html b/pages/page/pageTemplates/Edit page.html
index 852d2cc..1d96f25 100644
--- a/pages/page/pageTemplates/Edit page.html	
+++ b/pages/page/pageTemplates/Edit page.html	
@@ -2,15 +2,17 @@
   <div class="simplycode-header">
     <h1>Edit page: <span data-simply-field="component.id"></span></h1>
   </div>
-  <simply-render rel="componentDescription"></simply-render>
-  <simply-render rel="componentPageTemplate"></simply-render>
-  <simply-render rel="componentPageCss"></simply-render>
-  <simply-render rel="componentCommands"></simply-render>
-  <simply-render rel="componentShortcuts"></simply-render>
-  <simply-render rel="componentActions"></simply-render>
-  <simply-render rel="componentDataApi"></simply-render>
-  <simply-render rel="componentRoutes"></simply-render>
-  <simply-render rel="componentTransformers"></simply-render>
-  <simply-render rel="componentDataSources"></simply-render>
-  <simply-render rel="componentSorters"></simply-render>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentPageTemplate"></simply-render>
+    <simply-render rel="componentPageCss"></simply-render>
+    <simply-render rel="componentCommands"></simply-render>
+    <simply-render rel="componentShortcuts"></simply-render>
+    <simply-render rel="componentActions"></simply-render>
+    <simply-render rel="componentDataApi"></simply-render>
+    <simply-render rel="componentRoutes"></simply-render>
+    <simply-render rel="componentTransformers"></simply-render>
+    <simply-render rel="componentDataSources"></simply-render>
+    <simply-render rel="componentSorters"></simply-render>
+  </form>
 </main>
\ No newline at end of file
diff --git a/pages/pages/commands/createPage.js b/pages/pages/commands/createPage.js
index f3c7fcf..9d1227b 100644
--- a/pages/pages/commands/createPage.js
+++ b/pages/pages/commands/createPage.js
@@ -1,4 +1,7 @@
 function() {
+  if (!simplyApp.commands.preSaveCheck()) {
+    return;
+  }
   var newComponent = editor.pageData.newComponent;
   simplyApp.actions.savePage(newComponent)
     .then(function() {
diff --git a/pages/pages/pageTemplates/Pages.html b/pages/pages/pageTemplates/Pages.html
index 5768755..cd5b2dc 100644
--- a/pages/pages/pageTemplates/Pages.html
+++ b/pages/pages/pageTemplates/Pages.html
@@ -8,20 +8,22 @@ <h3 data-simply-field="id"></h3>
       </a>
     </template>
   </div>
-  <h1>Add page</h1>
-  <div class="simplycode-part">
-    <div class="simplycode-part-header">
-      <div class="simplycode-tabs">
-        <input data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+  <form action="#">
+    <h1>Add page</h1>
+    <div class="simplycode-part">
+      <div class="simplycode-part-header">
+        <div class="simplycode-tabs">
+          <input required data-simply-field="newComponent.id" class="simplycode-tab" placeholder="Name your component">
+        </div>
+        <div class="simplycode-options">
+          <button class="simplycode-button" data-simply-command="createPage">Create</button>
+        </div>
       </div>
-      <div class="simplycode-options">
-        <button class="simplycode-button" data-simply-command="createPage">Create</button>
+      <div class="simplycode-editors">
+        <div class="simplycode-editor-code">
+          <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
+        </div>
       </div>
     </div>
-    <div class="simplycode-editors">
-      <div class="simplycode-editor-code">
-        <textarea data-simply-field="newComponent.description" placeholder="Describe what this component should do, for your own use."></textarea>
-      </div>
-    </div>
-  </div>
-</main>
+  </form>
+</main>
\ No newline at end of file