v 2.63.0

Toolbox v 0.8.0 - Add form basic validation. - Fix for invalid input IDs.
WordPressUtilities · Dec 26, 2023 · 2590461 · 2590461
1 parent 50e4e44
commit 2590461
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 9 deletions.
diff --git a/inc/WPUBaseToolbox/WPUBaseToolbox.php b/inc/WPUBaseToolbox/WPUBaseToolbox.php
@@ -1,10 +1,10 @@
 <?php
-namespace wpubasetoolbox_0_7_1;
+namespace wpubasetoolbox_0_8_0;
 
 /*
 Class Name: WPU Base Toolbox
 Description: Cool helpers for WordPress Plugins
-Version: 0.7.1
+Version: 0.8.0
 Class URI: https://github.com/WordPressUtilities/wpubaseplugin
 Author: Darklg
 Author URI: https://darklg.me/
@@ -13,7 +13,16 @@
 */
 
 class WPUBaseToolbox {
-    public function __construct() {}
+    private $plugin_version = '0.8.0';
+    public function __construct() {
+        add_action('wp_enqueue_scripts', array(&$this,
+            'form_scripts'
+        ));
+    }
+
+    function form_scripts() {
+        wp_enqueue_script(__NAMESPACE__ . '-wpubasetoolbox-form-validation', plugins_url('assets/form-validation.js', __FILE__), array(), $this->plugin_version);
+    }
 
     /* ----------------------------------------------------------
       Forms
@@ -47,7 +56,7 @@ public function get_form_html($form_id, $fields = array(), $args = array()) {
         }
 
         /* Start form */
-        $html .= '<form class="' . esc_attr($args['form_classname']) . '" id="' . esc_attr($form_id) . '" action="" method="post" ' . $extra_post_attributes . '>';
+        $html .= '<form class="' . esc_attr($args['form_classname']) . ' wpubasetoolbox-form" id="' . esc_attr($form_id) . '" action="" method="post" ' . $extra_post_attributes . '>';
 
         /* Insert fields */
         foreach ($args['fieldsets'] as $fieldset_id => $fieldset) {
@@ -181,7 +190,7 @@ public function get_field_html($field_name, $field, $form_id, $args = array()) {
         }
 
         /* Values */
-        $field_id = $form_id . '__' . $field_name;
+        $field_id = strtolower($form_id . '__' . $field_name);
         $field_id_name = ' name="' . esc_attr($field_name) . '" id="' . esc_attr($field_id) . '" ' . $field['extra_attributes'];
         if ($field['required']) {
             $field_id_name .= ' required';
@@ -219,7 +228,7 @@ public function get_field_html($field_name, $field, $form_id, $args = array()) {
         case 'radio':
             $html .= $default_label;
             foreach ($field['data'] as $key => $var) {
-                $id_field = $field_id . '___' . $key;
+                $id_field = strtolower($field_id . '___' . $key);
                 $html .= '<span>';
                 $html .= '<input type="radio" id="' . esc_attr($id_field) . '" name="' . esc_attr($field_name) . '" value="' . esc_attr($key) . '" ' . ($key === $field['value'] ? 'checked' : '') . ' ' . ($field['required'] ? 'required' : '') . ' />';
                 $html .= '<label for="' . esc_attr($id_field) . '">' . $var . '</label>';
@@ -256,6 +265,7 @@ public function get_field_html($field_name, $field, $form_id, $args = array()) {
             $html .= '<' . $field_tag . ' class="' . $args['field_box_classname'] . '" data-box-name="' . $field_name . '" data-box-type="' . esc_attr($field['type']) . '">';
             $html .= $field['html_before_content'];
             $html .= $field_html;
+            $html .= '<span aria-hidden="true" class="wpubasetoolbox-form-validation-message"></span>';
             $html .= $field['html_after_content'];
             $html .= '</' . $field_tag . '>';
             $html .= $field['html_after_fieldgroup_inner'];

diff --git a/inc/WPUBaseToolbox/assets/form-validation.js b/inc/WPUBaseToolbox/assets/form-validation.js
@@ -0,0 +1,50 @@
+document.addEventListener("DOMContentLoaded", function() {
+    'use strict';
+    Array.prototype.forEach.call(document.querySelectorAll('.wpubasetoolbox-form [data-box-name]'), function($box, i) {
+        wpubasetoolbox_box_validation($box);
+    });
+});
+
+function wpubasetoolbox_box_validation($box) {
+    var _id = $box.getAttribute('data-box-name'),
+        $fields = $box.querySelectorAll('[name="' + _id + '"]'),
+        $message = $box.querySelector('.wpubasetoolbox-form-validation-message'),
+        _ischecking = false;
+
+    if (!$fields.length || !$message) {
+        return;
+    }
+
+    function check_field_error($tmp_field) {
+        if (_ischecking) {
+            return false;
+        }
+        _ischecking = true;
+        var _valid = $tmp_field.checkValidity();
+        _ischecking = false;
+        if (_valid) {
+            $box.setAttribute('data-box-error', '0');
+            $message.innerHTML = '';
+            return;
+        }
+        setTimeout(function() {
+            window.scrollTo({
+                top: $box.getBoundingClientRect().top + window.pageYOffset - 100,
+                behavior: 'smooth'
+            });
+        }, 10);
+
+        $box.setAttribute('data-box-error', '1');
+        $message.innerHTML = $tmp_field.validationMessage;
+    }
+
+    Array.prototype.forEach.call($fields, function($tmp_field, i) {
+        $tmp_field.addEventListener("invalid", function() {
+            check_field_error($tmp_field);
+        });
+        $tmp_field.addEventListener("change", function() {
+            check_field_error($tmp_field);
+        });
+    });
+
+}
diff --git a/wpubaseplugin.php b/wpubaseplugin.php
@@ -5,7 +5,7 @@
 Plugin URI: https://github.com/WordPressUtilities/wpubaseplugin
 Update URI: https://github.com/WordPressUtilities/wpubaseplugin
 Description: A framework for a WordPress plugin
-Version: 2.62.1
+Version: 2.63.0
 Author: Darklg
 Author URI: https://darklg.me/
 Text Domain: wpubaseplugin
@@ -18,7 +18,7 @@
 
 class WPUBasePlugin {
 
-    public $version = '2.62.1';
+    public $version = '2.63.0';
 
     private $utilities_classes = array(
         'messages' => array(
@@ -54,7 +54,7 @@ class WPUBasePlugin {
             'name' => 'WPUBaseEmail'
         ),
         'toolbox' => array(
-            'namespace' => 'wpubasetoolbox_0_7_1',
+            'namespace' => 'wpubasetoolbox_0_8_0',
             'name' => 'WPUBaseToolbox'
         ),
         'filecache' => array(