FW_Form: customize errors and ajax submit

helpers/php.rst

@@ -598,4 +598,66 @@ A convenient way to create forms. You can create a form class instance and give
     // this will output:
     // <form ... ><input type="text" name="demo" maxlength="10" value=""></form>
 
+.. rubric:: Customize errors display
+
+By default the errors are displayed right before the ``<form>`` tag.
+You can display the errors in your own way and cancel the default display.
+Before the errors are displayed, an action is fired so you can use it:
+
+.. code-block:: php
+
+    /**
+     * @param FW_Form $form
+     * @internal
+     */
+    function _action_theme_fw_form_errors_display($form) {
+        /**
+         * Once the errors was accessed/requested
+         * the form will cancel/abort the default errors display
+         */
+        $errors = $form->get_errors();
+
+        echo '<ul class="your-custom-errors-class">';
+        foreach ($errors as $input_name => $error_message) {
+            echo fw_html_tag(
+                'li',
+                array('data-input-name' => $input_name),
+                $error_message
+            );
+        }
+        echo '</ul>';
+    }
+    add_action('fw_form_display_errors_frontend', '_action_theme_fw_form_errors_display');
+
+.. rubric:: Ajax submit
+
+You can use `this script <https://github.com/ThemeFuse/Unyson/blob/master/framework/static/js/fw-form-helpers.js>`__ to make ``FW_Form`` ajax submittable.
+
+Enqueue the script in frontend:
+
+.. code-block:: php
+
+    // file: {theme}/inc/static.php
+    // https://github.com/ThemeFuse/Theme-Includes
+
+    if (!is_admin()) {
+        wp_enqueue_script(
+            'fw-form-helpers',
+            fw_get_framework_directory_uri('/static/js/fw-form-helpers.js')
+        );
+    }
+
+Run the initialization script:
+
+.. code-block:: javascript
+
+    jQuery(function(){
+        fwForm.initAjaxSubmit({
+            //selector: 'form[some-custom-attribute].or-some-class'
+
+            // Open the script code and check the `opts` variable
+            // to see all options that you can overwrite/customize.
+        });
+    });
+
 .. include:: /links.rst.inc

options/built-in-option-types.rst

@@ -112,7 +112,7 @@ If you want to display a custom piece of html, use this option type.
 
 .. note::
 
-    There are ``html-fixed`` and ``html-full`` option types as well. They are the same as ``html`` but has **fixed** and **full** :doc:`option width <option-width>`.
+    There are ``html-fixed`` and ``html-full`` option types as well. They are the same as ``html`` but has **fixed** and **full** :doc:`option width <create-option-type>`.