[+] form submit prevent on failing validation fixed

Aeria/Aeria.php

@@ -31,7 +31,7 @@
  */
 class Aeria extends Container
 {
-    const VERSION = '3.2.1';
+    const VERSION = '3.2.2';
 
     /**
      * Constructs the Aeria container.

Resources/Templates/OptionTemplate.php

@@ -1,5 +1,5 @@
 <h1><?=$data['config']['title']; ?></h1>
-<form method="post">
+<form id="form-aeria-options" method="post">
     <?= wp_nonce_field($data['nonceIDs']['action'], $data['nonceIDs']['field']); ?>
     <div id="aeriaApp-<?=$data['config']['id']; ?>" class="aeriaApp">
       <div style="display: none;">

aeria.php

@@ -10,7 +10,7 @@
  * Plugin Name: Aeria
  * Plugin URI:  https://github.com/caffeinalab/aeria
  * Description: Aeria is a modular, lightweight, fast WordPress Application development kit.
- * Version:     3.2.1
+ * Version:     3.2.2
  * Author:      Caffeina
  * Author URI:  https://caffeina.com
  * Text Domain: aeria

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeria",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Aeria",
   "scripts": {
     "dev": "webpack --watch --mode development",
@@ -38,8 +38,8 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
-    "@aeria/core": "0.0.16",
-    "@aeria/uikit": "0.0.18",
+    "@aeria/core": "0.0.17",
+    "@aeria/uikit": "0.0.19",
     "lodash.throttle": "^4.1.1",
     "polished": "^3.5.1",
     "react": "^16.13.1",

scripts/hoc/withPreventPostUpdate.js

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react'
 import klona from 'klona'
 import { Validator } from '@aeria/uikit'
+import { isFieldEnabled } from '@aeria/core'
 import { addValidator } from '../utils/prevent-post-update'
 import scrollTo from '../utils/scroll-to'
 
-
 export default function withPreventPostUpdate(WrappedComponent) {
   return class extends PureComponent {
     constructor(props) {
       super(props)
-      this.state = { fields: props.fields}
+      this.state = { fields: props.fields }
       addValidator(this.validate)
     }
 
@@ -38,22 +38,23 @@ export default function withPreventPostUpdate(WrappedComponent) {
       return !!this.lastInvalidField
     }
 
-
     async updateFields(fields) {
       const fieldsUpdate = await Promise.all(
-        fields.map(async field => {
-          const v = new Validator(field)
-          field.error = await v.validate((field.value || field.defaultValue))
-
-          if (field.children) {
-            field.children = await this.updateFields(field.children)
-          }
-
-          if (field.fields) {
-            field.fields = await this.updateFields(field.fields)
-          }
-          return field
-        })
+        fields
+          .filter(field => isFieldEnabled(field, fields))
+          .map(async field => {
+            const v = new Validator(field)
+            field.error = await v.validate((field.value || field.defaultValue))
+
+            if (field.children) {
+              field.children = await this.updateFields(field.children)
+            }
+
+            if (field.fields) {
+              field.fields = await this.updateFields(field.fields)
+            }
+            return field
+          })
       )
 
       return fieldsUpdate

scripts/utils/prevent-post-update.js

@@ -1,32 +1,44 @@
 
+const form = document.getElementById('post') || document.getElementById('form-aeria-options')
 const validators = []
 let preventingSave = false
+let isValid = false
 
 async function validate() {
   const results = await Promise.all(
     validators.map(async validation => {
       return await validation()
     })
   )
-  return results.some(r => !r)
+  return results.some(r => r)
 }
 
-async function handleSubmit(e) {
-  const isValid = await validate()
-  if (!isValid) {
-    e.preventDefault()
+function handleSubmit(e) {
+  if (isValid) {
+    return true
   }
-}
 
-function addListeners() {
-  const formPost = document.getElementById('post')
-  const saveButton = document.getElementById('publish')
-  if (formPost) {
-    formPost.addEventListener('submit', handleSubmit)
+  e.preventDefault()
+
+  // preventing wp save alert
+  if (window.jQuery) {
+    jQuery(window).off('beforeunload.edit-post')
   }
 
-  if (saveButton) {
-    saveButton.addEventListener('click', handleSubmit)
+  validate()
+    .then(hasErrors => {
+      isValid = !hasErrors
+      if (isValid) {
+        form.submit()
+      }
+    })
+
+  return false
+}
+
+function addListeners() {
+  if (form) {
+    form.addEventListener('submit', handleSubmit)
   }
 }
 
@@ -37,4 +49,3 @@ export function addValidator(validator) {
     addListeners()
   }
 }
-