gina 0.3.9 → 0.3.10

package/framework/{v0.3.9 → v0.3.10}/core/plugins/lib/validator/src/main.js

@@ -4193,6 +4193,26 @@ function ValidatorPlugin(rules, data, formId) {
         } //EO for $els
 
         $els = null; $el = null; $elTMP = null; evt = null;
+
+        // [HTML5 form-reassociation support] Drain per-control listeners attached to
+        // reassociated controls during bindForm. The element-by-tagName loops above
+        // walk $form.target's descendant tree only, so reassociated controls (which
+        // live outside that subtree) are invisible to them. We hold a side-table of
+        // {el, evt, fn} triples and remove each listener directly from its element.
+        // Direct removeEventListener (not the gina removeListener helper) avoids
+        // touching gina.events bookkeeping that the form-level proxies still rely on.
+        if ( Array.isArray($form.reassociatedListeners) ) {
+            for (let i = 0, len = $form.reassociatedListeners.length; i < len; i++) {
+                let entry = $form.reassociatedListeners[i];
+                if (entry && entry.el && entry.el.removeEventListener) {
+                    entry.el.removeEventListener(entry.evt, entry.fn, false);
+                } else if (entry && entry.el && entry.el.detachEvent) {
+                    entry.el.detachEvent('on' + entry.evt, entry.fn);
+                }
+            }
+            $form.reassociatedListeners = [];
+        }
+
         // reset error display
         //resetErrorsDisplay($form);
         // or
@@ -4324,18 +4344,54 @@ function ValidatorPlugin(rules, data, formId) {
         if (!$form.fieldsSet)
             $form.fieldsSet = {};
 
+        // Side-table for per-control listeners attached on form-reassociated controls
+        // (controls whose form="X" attribute points at $target but which live OUTSIDE
+        // $target's DOM subtree). Drained by unbindForm.
+        if (!Array.isArray($form.reassociatedListeners))
+            $form.reassociatedListeners = [];
+
+        // Helper: collect controls owned by $form, including HTML5 form-reassociated
+        // controls (those carrying `form="X"` outside the form's DOM subtree). Walks
+        // $form.elements (HTMLFormControlsCollection — owner-aware) for the primary set,
+        // then a secondary in-tree sweep filtered by `.form === $form` to catch elements
+        // HTMLFormControlsCollection skips (type=image, nameless+idless). The `.form`
+        // filter also excludes in-tree descendants whose `form="..."` points at a different
+        // form (parent-form contamination guard).
+        var getOwnedElements = function($form, tag) {
+            var arr  = []
+                , seen = {}
+                , tagUpper = tag.toUpperCase()
+            ;
+            for (let i = 0, len = $form.elements.length; i < len; i++) {
+                let $el = $form.elements[i];
+                if ($el.tagName === tagUpper) {
+                    arr.push($el);
+                    if ($el.id) seen[$el.id] = true;
+                }
+            }
+            var inTree = $form.getElementsByTagName(tag);
+            for (let i = 0, len = inTree.length; i < len; i++) {
+                let $el = inTree[i];
+                if ($el.form === $form && (!$el.id || !seen[$el.id])) {
+                    arr.push($el);
+                }
+            }
+            return arr;
+        };
+
         // binding form elements
         var type            = null
             , id            = null
 
-            // a|links
+            // a|links — DOM-tree only (anchor elements don't carry the HTMLFormControlsCollection
+            // owner relationship; reassociated <a data-gina-form-submit> is not a documented pattern)
             , $a            = $target.getElementsByTagName('a')
             // input type: checkbox, radio, hidden, text, files, number, date ...
-            , $inputs       = $target.getElementsByTagName('input')
+            , $inputs       = getOwnedElements($target, 'input')
             // textarea
-            , $textareas    = $target.getElementsByTagName('textarea')
+            , $textareas    = getOwnedElements($target, 'textarea')
             // select
-            , $select       = $target.getElementsByTagName('select')
+            , $select       = getOwnedElements($target, 'select')
             , allFormGroupedElements = {}
             , allFormGroupNames = []
             , formElementGroup = {}
@@ -4431,9 +4487,15 @@ function ValidatorPlugin(rules, data, formId) {
 
                 if ( /^(checkbox|radio)$/i.test($inputs[f].type) && typeof($form.fieldsSet[elId].defaultChecked) == 'undefined' ) {
 
-
+                    // Read the IDL `defaultChecked` (which mirrors the HTML `checked`
+                    // attribute) instead of the live `.checked`. For form-reassociated
+                    // radios hit by Chromium's parse-time IDL/attribute desync — sister
+                    // bug to the updateRadio reconciliation at commit 80dd89f9 — `.checked`
+                    // reads FALSE at bind time despite the attribute being present, so
+                    // caching from `.checked` would hold the wrong default and a subsequent
+                    // form-reset would clear the originally-checked option.
                     $form.fieldsSet[elId].defaultChecked = (
-                                                            /^(true|on)$/i.test($inputs[f].checked)
+                                                            $inputs[f].defaultChecked
                                                             ||
                                                             /^(true|on)$/.test(defaultValue)
                                                             && /^(checkbox)$/i.test($inputs[f].type)
@@ -5321,9 +5383,32 @@ function ValidatorPlugin(rules, data, formId) {
             isInit = ( typeof(isInit) == 'undefined' || !isInit ) ? false : true;
             isTriggedByUser = ( typeof(isTriggedByUser) == 'undefined' || !isTriggedByUser ) ? false : true;
 
+            // [HTML5 form-reassociation] Reconcile the IDL `.checked` property with the
+            // `checked` HTML attribute on init when they disagree. Background: when
+            // multiple form-reassociated radios share a `name` AND are DOM descendants of
+            // a common ancestor `<form>`, Chromium-based browsers uncheck the earlier ones
+            // at parse time even though each radio belongs to a distinct form-owner per
+            // the HTML5 spec — leaving `.checked = false` while the `checked` HTML
+            // attribute is still present. Aligning the IDL state with the attribute
+            // matches the author's intent and is a no-op for the normal (non-reassociated)
+            // shape where the two already agree.
+            if ( isInit && !$el.checked && $el.hasAttribute('checked') ) {
+                $el.checked = true;
+            }
+
             var checked = $el.checked, evt = null;
             var isBoolean = /^(true|false)$/i.test($el.value);
-            radioGroup = document.getElementsByName($el.name);
+
+            // [HTML5 form-reassociation] Scope the mutual-exclusion peer set by form-owner
+            // per HTML5 spec ("the radio button group that contains a radio button a also
+            // contains all the other input elements b that fulfill ... b's form owner is
+            // a's form owner"). `getElementsByName` returns same-name radios across the
+            // whole document regardless of owner — without this filter, unchecking peers
+            // cross-fires into other forms whose radios happen to share the name.
+            var rawRadioGroup = document.getElementsByName($el.name);
+            radioGroup = Array.prototype.filter.call(rawRadioGroup, function(_r) {
+                return _r.form === $el.form;
+            });
 
             // loop if radio group
             for (let r = 0, rLen = radioGroup.length; r < rLen; ++r) {
@@ -5459,338 +5544,347 @@ function ValidatorPlugin(rules, data, formId) {
 
         evt = 'click';
 
-        proceed = function () {
-            var subEvent = null;
-            // handle form reset
-            subEvent = 'reset.'+$target.id;
-            if ( typeof(gina.events[subEvent]) == 'undefined' ) {
-                addListener(gina, $target, subEvent, function(e) {
-                    e.preventDefault();
+        // [HTML5 form-reassociation support] Form-level proxy handler bodies extracted as
+        // named expressions so the same handlers can be attached on $target (form-level —
+        // captures bubbled events from in-tree controls) AND on each reassociated control
+        // (per-control — events on reassociated controls bubble through THEIR ancestors,
+        // not through $target, so the form-level listener never fires for them). Handler
+        // bodies read event.target.id and dispatch via gina.events; they don't depend on
+        // event.currentTarget being the form (the few places that reference currentTarget
+        // are guarded fallbacks that no-op on a control).
+        var resetProxyHandler = function(event) {
+            var $el = event.target;
+            if (
+                typeof(event.defaultPrevented) != 'undefined'
+                && event.defaultPrevented
+            ) {
+                return false;
+            }
+            event.preventDefault();
+            var _evt = $el.id;
+            if (!_evt) return false;
+            if ( !/^reset\./.test(_evt) ) {
+                _evt = 'reset.'+$el.id
+            }
+            if (gina.events[_evt]) {
+                triggerEvent(gina, $el, _evt, event.detail);
+            }
+        };
+        var keydownProxyHandler = function(event) {
+            var $el = event.target;
+            if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
+            return false;
 
-                    var _id             = e.currentTarget.id || e.target.id
-                    var $form           = instance.$forms[_id];
-                    $form.target.dataset.ginaFormIsResetting = true;
-                    resetFields($form);
-                    // forcing it
-                    var validationInfo  = getFormValidationInfos($form.target, $form.rules, true);
-                    var fields          = validationInfo.fields;
-                    var $fields         = validationInfo.$fields;
+            keyboardMapping[event.keyCode] = event.type == 'keydown';
 
-                    validate($form.target, fields, $fields, $form.rules, function onSilentResetValidation(result){
-                        var isFormValid = result.isValid();
-                        console.debug('silent reset validation result[isValid:'+isFormValid+']: ', result);
-                        //resetting error display
-                        handleErrorsDisplay($form.target, {});
+            var _evt = $el.id;
+            if (!_evt) return false;
 
-                        updateSubmitTriggerState( $form.target , isFormValid );
-                        $form.target.dataset.ginaFormIsResetting = false;
-                    });
-                })
+            if ( !/^keydown\./.test(_evt) ) {
+                _evt = 'keydown.'+$el.id
             }
-            // reset proxy
-            addListener(gina, $target, 'reset', function(event) {
-                var $el = event.target;
-                // prevent event to be triggered twice
-                if (
-                    typeof(event.defaultPrevented) != 'undefined'
-                    && event.defaultPrevented
-                ) {
-                    return false;
-                }
-                // Fixed on 2021/06/08 - because of radio reset
-                event.preventDefault();
-
-                var _evt = $el.id;
-                if (!_evt) return false;
+            if (gina.events[_evt]) {
+                cancelEvent(event);
+                triggerEvent(gina, $el, _evt, event.detail, event);
+            }
+        };
+        var keyupProxyHandler = function(event) {
+            var $el = event.target;
+            if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
+            return false;
 
-                if ( !/^reset\./.test(_evt) ) {
-                    _evt = 'reset.'+$el.id
-                }
-                if (gina.events[_evt]) {
-                    triggerEvent(gina, $el, _evt, event.detail);
-                }
-            });
-            // keydown proxy
-            addListener(gina, $target, 'keydown', function(event) {
-                var $el = event.target;
-                // prevent event to be triggered twice
-                if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
-                return false;
+            if (keyboardMapping[event.keyCode]) {
+                delete keyboardMapping[event.keyCode]
+            }
 
-                keyboardMapping[event.keyCode] = event.type == 'keydown';
+            var _evt = $el.id;
+            if (!_evt) return false;
+            if ( !/^keyup\./.test(_evt) ) {
+                _evt = 'keyup.'+$el.id
+            }
+            if (gina.events[_evt]) {
+                cancelEvent(event);
+                triggerEvent(gina, $el, _evt, event.detail, event);
+            }
+        };
+        var focusinProxyHandler = function(event) {
+            var $el = event.target;
+            if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
+            return false;
 
-                var _evt = $el.id;
-                if (!_evt) return false;
+            var _evt = $el.id;
+            if (!_evt) return false;
 
-                if ( !/^keydown\./.test(_evt) ) {
-                    _evt = 'keydown.'+$el.id
-                }
-                if (gina.events[_evt]) {
-                    cancelEvent(event);
-                    triggerEvent(gina, $el, _evt, event.detail, event);
-                }
-            });
-            // keyup proxy - updating keyboardMapping
-            addListener(gina, $target, 'keyup', function(event) {
-                var $el = event.target;
-                // prevent event to be triggered twice
-                if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
-                return false;
+            if ( !/^focusin\./.test(_evt) ) {
+                _evt = 'focusin.'+$el.id
+            }
+            if (gina.events[_evt]) {
+                cancelEvent(event);
 
-                if (keyboardMapping[event.keyCode]) {
-                    delete keyboardMapping[event.keyCode]
+                // event.target.form works for both in-tree and reassociated controls
+                // (form-association is owner-relationship-aware); event.currentTarget
+                // is the form when attached form-level, the control when per-control.
+                var formId      = event.target.form.getAttribute('id') || ((event.currentTarget && event.currentTarget.getAttribute) ? event.currentTarget.getAttribute('id') : null);
+                var lastFocused = {
+                    id  : $el.id,
+                    name: $el.name
+                };
+                if (!instance.$forms[formId].lastFocused.length) {
+                    instance.$forms[formId].lastFocused[0] = lastFocused;
+                } else {
+                    instance.$forms[formId].lastFocused.splice(0,0,lastFocused);
                 }
+                lastFocused = ( typeof(instance.$forms[formId].lastFocused[1]) != 'undefined' ) ? instance.$forms[formId].lastFocused[1].id : null;
 
-                var _evt = $el.id;
-                if (!_evt) return false;
-                if ( !/^keyup\./.test(_evt) ) {
-                    _evt = 'keyup.'+$el.id
-                }
-                if (gina.events[_evt]) {
-                    cancelEvent(event);
-                    triggerEvent(gina, $el, _evt, event.detail, event);
-                }
-            });
+                instance.$forms[formId].lastFocused.splice(2);
 
-            // focusin proxy
-            addListener(gina, $target, 'focusin', function(event) {
-                var $el = event.target;
-                // prevent event to be triggered twice
-                if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
+                triggerEvent(gina, $el, _evt, event.detail);
+            }
+        };
+        var focusoutProxyHandler = function(event) {
+            var $el = event.target;
+            if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
                 return false;
 
-                var _evt = $el.id;
-                if (!_evt) return false;
-
-                if ( !/^focusin\./.test(_evt) ) {
-                    _evt = 'focusin.'+$el.id
-                }
-                if (gina.events[_evt]) {
-                    cancelEvent(event);
-
-                    // Fixed on 2025-03-05 - "last focus" vs "current focus"
-                    // To get active element: document.activeElement
-                    var formId      = event.target.form.getAttribute('id') || event.currentTarget.getAttribute('id');
-                    var lastFocused = {
-                        id  : $el.id,
-                        name: $el.name
-                    };
-                    if (!instance.$forms[formId].lastFocused.length) {
-                        instance.$forms[formId].lastFocused[0] = lastFocused;
-                    } else {
-                        instance.$forms[formId].lastFocused.splice(0,0,lastFocused);
-                    }
-                    lastFocused = ( typeof(instance.$forms[formId].lastFocused[1]) != 'undefined' ) ? instance.$forms[formId].lastFocused[1].id : null;
-
-                    // cleanup
-                    instance.$forms[formId].lastFocused.splice(2);
+            var _evt = $el.id;
+            if (!_evt) return false;
 
-                    // console.debug('lastFocused: ', lastFocused, ' VS current: ', $el.id);
-
-                    triggerEvent(gina, $el, _evt, event.detail);
-                }
-            });
-            // focusout proxy
-            addListener(gina, $target, 'focusout', function(event) {
-                // Never preventDefault from a proxy listner
-                var $el = event.target;
-                // prevent event to be triggered twice
-                if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
-                    return false;
+            if ( !/^focusout\./.test(_evt) ) {
+                _evt = 'focusout.'+$el.id
+            }
+            if (gina.events[_evt]) {
+                cancelEvent(event);
 
-                var _evt = $el.id;
-                if (!_evt) return false;
+                triggerEvent(gina, $el, _evt, event.detail);
+            }
+        };
+        var changeProxyHandler = function(event) {
+            var $el = event.target;
+            if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
+            return false;
 
-                if ( !/^focusout\./.test(_evt) ) {
-                    _evt = 'focusout.'+$el.id
-                }
-                if (gina.events[_evt]) {
-                    cancelEvent(event);
+            var _evt = $el.id;
+            if (!_evt) return false;
 
-                    triggerEvent(gina, $el, _evt, event.detail);
-                }
-            });
+            if ( !/^change\./.test(_evt) ) {
+                _evt = 'change.'+$el.id
+            }
+            if (gina.events[_evt]) {
+                cancelEvent(event);
+                triggerEvent(gina, $el, _evt, event.detail);
+            }
+        };
+        var clickProxyHandler = function(event) {
+            var $el = event.target;
 
-            // change proxy
-            addListener(gina, $target, 'change', function(event) {
-                // Never preventDefault from a proxy listner
-                var $el = event.target;
-                // prevent event to be triggered twice
-                if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
-                return false;
+            var isCustomSubmit = false, isCaseIgnored = false;
 
-                var _evt = $el.id;
-                if (!_evt) return false;
+            if (
+                /(label)/i.test(event.target.tagName)
+                    && typeof(event.target.control) != 'undefined'
+                    && event.target.control != null
+                    && /(checkbox|radio)/i.test(event.target.control.type)
+                ||
+                /(label)/i.test(event.target.parentNode.tagName)
+                    && typeof(event.target.parentNode.control) != 'undefined'
+                    && event.target.parentNode.control != null
+                    && /(checkbox|radio)/i.test(event.target.parentNode.control.type)
+            ) {
+                var isCaseIgnored = (
+                                    event.target.getAttribute('for')
+                                    ||
+                                    event.target.parentNode.getAttribute('for')
+                                ) ? true : false
+                ;
+                $el = event.target.control || event.target.parentNode.control;
 
-                if ( !/^change\./.test(_evt) ) {
-                    _evt = 'change.'+$el.id
-                }
-                if (gina.events[_evt]) {
-                    cancelEvent(event);
-                    triggerEvent(gina, $el, _evt, event.detail);
+            }
+            if (
+                !$el.disabled
+                && /(checkbox|radio)/i.test($el.type)
+                && !isCaseIgnored
+            ) {
+                if ( /checkbox/i.test($el.type) ) {
+                    return updateCheckBox($el);
+                } else if ( /radio/i.test($el.type) ) {
+                    return updateRadio($el, false, true);
                 }
-            });
-            // click proxy
-            addListener(gina, $target, 'click', function(event) {
-                // Never preventDefault from a proxy listner
-                var $el = event.target;
-                // prevent event to be triggered twice
-                // if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
-                //     return false;
+            }
 
-                var isCustomSubmit = false, isCaseIgnored = false;
 
+            if (
+                /(button|input)/i.test($el.tagName) && /(submit|checkbox|radio)/i.test($el.type)
+                || /a/i.test($el.tagName) && $el.attributes.getNamedItem('data-gina-form-submit')
+                || /a/i.test($el.parentNode.tagName) && $el.parentNode.attributes.getNamedItem('data-gina-form-submit')
+            ) {
+                var namedItem = $el.attributes.getNamedItem('data-gina-form-submit');
+                var parentNamedItem = $el.parentNode.attributes.getNamedItem('data-gina-form-submit');
                 if (
-                    /(label)/i.test(event.target.tagName)
-                        && typeof(event.target.control) != 'undefined'
-                        && event.target.control != null
-                        && /(checkbox|radio)/i.test(event.target.control.type)
+                    namedItem
                     ||
-                    /(label)/i.test(event.target.parentNode.tagName)
-                        && typeof(event.target.parentNode.control) != 'undefined'
-                        && event.target.parentNode.control != null
-                        && /(checkbox|radio)/i.test(event.target.parentNode.control.type)
+                    parentNamedItem
                 ) {
-                    var isCaseIgnored = (
-                                        event.target.getAttribute('for')
-                                        ||
-                                        event.target.parentNode.getAttribute('for')
-                                    ) ? true : false
-                    ;
-                    // if `event.target.control` not working on all browser,
-                    // try to detect `for` attribute OR check if on of the label's event.target.children is an input & type == (checkbox|radio)
-                    $el = event.target.control || event.target.parentNode.control;
-
-                }
-                if (
-                    !$el.disabled
-                    && /(checkbox|radio)/i.test($el.type)
-                    && !isCaseIgnored
-                ) {
-                    // apply checked choice : if true -> set to false, and if false -> set to true
-                    if ( /checkbox/i.test($el.type) ) {
-                        return updateCheckBox($el);
-                    } else if ( /radio/i.test($el.type) ) {
-                        return updateRadio($el, false, true);
+                    isCustomSubmit = true;
+                    // For form-level (event.currentTarget == form), reads the form's
+                    // method attribute. For per-control on a reassociated submit, the
+                    // currentTarget fallback yields null and the if(newFormMethod) below
+                    // skips the override block — typical reassociated submits don't need it.
+                    var newFormMethod = null;
+                    var $methodSrc = (event.currentTarget && event.currentTarget.getAttribute) ? event.currentTarget : ($el.form || null);
+                    if (namedItem) {
+                        newFormMethod = $el.getAttribute('data-gina-form-submit-method') || ($methodSrc ? $methodSrc.getAttribute('method') : null);
+                    } else {
+                        newFormMethod = $el.parentNode.getAttribute('data-gina-form-submit-method') || ($methodSrc ? $methodSrc.getAttribute('method') : null);
                     }
-                }
-
-
-                // include only these elements for the binding
-                if (
-                    /(button|input)/i.test($el.tagName) && /(submit|checkbox|radio)/i.test($el.type)
-                    || /a/i.test($el.tagName) && $el.attributes.getNamedItem('data-gina-form-submit')
-                    // You could also have a click on a child element like <a href="#"><span>click me</span></a>
-                    || /a/i.test($el.parentNode.tagName) && $el.parentNode.attributes.getNamedItem('data-gina-form-submit')
-                ) {
-                    var namedItem = $el.attributes.getNamedItem('data-gina-form-submit');
-                    var parentNamedItem = $el.parentNode.attributes.getNamedItem('data-gina-form-submit');
-                    if (
-                        namedItem
-                        ||
-                        parentNamedItem
-                    ) {
-                        isCustomSubmit = true;
-                        // Get others attribute and override current form attribute
-                        var newFormMethod = null;
-                        if (namedItem) {
-                            newFormMethod = $el.getAttribute('data-gina-form-submit-method') || event.currentTarget.getAttribute('method');
-                        } else {
-                            newFormMethod = $el.parentNode.getAttribute('data-gina-form-submit-method') || event.currentTarget.getAttribute('method');
-                        }
-                        if (newFormMethod) {
-                            // Backup originalMethod
-
-                            // Rewrite current method
-                            if (namedItem && $el.form) {
-                                if ($el.form.setAttribute) {
-                                    $el.form.setAttribute('method', newFormMethod);
-                                } else {
-                                    event.currentTarget.setAttribute('method', newFormMethod);
-                                }
-                            } else if ($el.parentNode.form) {
-                                if ($el.parentNode.form.setAttribute) {
-                                    $el.parentNode.form.setAttribute('method', newFormMethod);
-                                } else {
-                                    event.currentTarget.setAttribute('method', newFormMethod);
-                                }
+                    if (newFormMethod) {
+                        if (namedItem && $el.form) {
+                            if ($el.form.setAttribute) {
+                                $el.form.setAttribute('method', newFormMethod);
+                            } else if (event.currentTarget && event.currentTarget.setAttribute) {
+                                event.currentTarget.setAttribute('method', newFormMethod);
+                            }
+                        } else if ($el.parentNode.form) {
+                            if ($el.parentNode.form.setAttribute) {
+                                $el.parentNode.form.setAttribute('method', newFormMethod);
+                            } else if (event.currentTarget && event.currentTarget.setAttribute) {
+                                event.currentTarget.setAttribute('method', newFormMethod);
                             }
                         }
                     }
-                    // safety checking
-                    if ( typeof($el.id) == 'undefined' || !$el.getAttribute('id') ) {
-                        $el.setAttribute('id', 'click.' + uuid() );
-                        $el.id = $el.getAttribute('id')
-                    } else {
-                        $el.id = $el.getAttribute('id')
-                    }
+                }
+                if ( typeof($el.id) == 'undefined' || !$el.getAttribute('id') ) {
+                    $el.setAttribute('id', 'click.' + uuid() );
+                    $el.id = $el.getAttribute('id')
+                } else {
+                    $el.id = $el.getAttribute('id')
+                }
 
 
-                    if (/^click\./.test($el.id) || withRules) {
+                if (/^click\./.test($el.id) || withRules) {
 
-                        var _evt = $el.id;
+                    var _evt = $el.id;
 
-                        if (!_evt) return false;
+                    if (!_evt) return false;
 
-                        if ( !/^click\./.test(_evt) ) {
-                            _evt = $el.id
-                        }
+                    if ( !/^click\./.test(_evt) ) {
+                        _evt = $el.id
+                    }
 
-                        // normal case
-                        if (
-                            !$el.disabled
-                            && /(checkbox|radio)/i.test($el.type)
-                        ) {
-                            //event.stopPropagation();
-                            // apply checked choice : if true -> set to false, and if false -> set to true
-                            if ( /checkbox/i.test($el.type) ) {
-                                return updateCheckBox($el);
-                            } else if ( /radio/i.test($el.type) ) {
-                                return updateRadio($el, false, true);
-                            }
+                    if (
+                        !$el.disabled
+                        && /(checkbox|radio)/i.test($el.type)
+                    ) {
+                        if ( /checkbox/i.test($el.type) ) {
+                            return updateCheckBox($el);
+                        } else if ( /radio/i.test($el.type) ) {
+                            return updateRadio($el, false, true);
                         }
+                    }
 
-                        // prevent event to be triggered twice
-                        if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
-                            return false;
+                    if ( typeof(event.defaultPrevented) != 'undefined' && event.defaultPrevented )
+                        return false;
 
-                        // in case we have multiple submit type buttons
-                        if (
-                            $el.type == 'submit' && !/^submit\./i.test(_evt)
-                            ||
-                            isCustomSubmit && !/^submit\./i.test(_evt)
-                        ) {
-                            _evt = 'submit.'+_evt;
-                            // Updating submitTrigger in case it has been changed on the fly
-                            instance.$forms[$form.id].submitTrigger = $form.submitTrigger = $el.id;
-                        }
-                        // in case we have multiple reset type buttons
-                        if ( $el.type == 'reset' && !/^reset\./i.test(_evt) ) {
-                            _evt = 'reset.'+_evt
-                        }
-
-                        if (gina.events[_evt]) {
-                            cancelEvent(event);
+                    if (
+                        $el.type == 'submit' && !/^submit\./i.test(_evt)
+                        ||
+                        isCustomSubmit && !/^submit\./i.test(_evt)
+                    ) {
+                        _evt = 'submit.'+_evt;
+                        instance.$forms[$form.id].submitTrigger = $form.submitTrigger = $el.id;
+                    }
+                    if ( $el.type == 'reset' && !/^reset\./i.test(_evt) ) {
+                        _evt = 'reset.'+_evt
+                    }
 
-                            triggerEvent(gina, $el, _evt, event.detail);
-                        } else if (
-                            isCustomSubmit
-                            && typeof(this.id) != 'undefined'
-                            && this.id != ''
-                            && typeof(gina.validator.$forms[this.id]) != 'undefined'
-                        ) {
-                            gina.validator.getFormById(this.id).submit();
-                            cancelEvent(event); // stop #navigation
-                        }
+                    if (gina.events[_evt]) {
+                        cancelEvent(event);
 
+                        triggerEvent(gina, $el, _evt, event.detail);
+                    } else if (
+                        isCustomSubmit
+                        && typeof(this.id) != 'undefined'
+                        && this.id != ''
+                        && typeof(gina.validator.$forms[this.id]) != 'undefined'
+                    ) {
+                        gina.validator.getFormById(this.id).submit();
+                        cancelEvent(event);
                     }
+
                 }
+            }
+        };
 
-            })
+        proceed = function () {
+            var subEvent = null;
+            // handle form reset
+            subEvent = 'reset.'+$target.id;
+            if ( typeof(gina.events[subEvent]) == 'undefined' ) {
+                addListener(gina, $target, subEvent, function(e) {
+                    e.preventDefault();
+
+                    var _id             = e.currentTarget.id || e.target.id
+                    var $form           = instance.$forms[_id];
+                    $form.target.dataset.ginaFormIsResetting = true;
+                    resetFields($form);
+                    // forcing it
+                    var validationInfo  = getFormValidationInfos($form.target, $form.rules, true);
+                    var fields          = validationInfo.fields;
+                    var $fields         = validationInfo.$fields;
+
+                    validate($form.target, fields, $fields, $form.rules, function onSilentResetValidation(result){
+                        var isFormValid = result.isValid();
+                        console.debug('silent reset validation result[isValid:'+isFormValid+']: ', result);
+                        //resetting error display
+                        handleErrorsDisplay($form.target, {});
+
+                        updateSubmitTriggerState( $form.target , isFormValid );
+                        $form.target.dataset.ginaFormIsResetting = false;
+                    });
+                })
+            }
+            // Form-level proxies: capture bubbled events from in-tree controls.
+            addListener(gina, $target, 'reset', resetProxyHandler);
+            addListener(gina, $target, 'keydown', keydownProxyHandler);
+            addListener(gina, $target, 'keyup', keyupProxyHandler);
+            addListener(gina, $target, 'focusin', focusinProxyHandler);
+            addListener(gina, $target, 'focusout', focusoutProxyHandler);
+            addListener(gina, $target, 'change', changeProxyHandler);
+            addListener(gina, $target, 'click', clickProxyHandler);
         }
 
         proceed();
 
+        // [HTML5 form-reassociation support] Per-control listener attachment for
+        // reassociated controls (form="X" pointing at $target but living outside
+        // $target's DOM subtree). Native events on these controls bubble through
+        // their actual ancestors, not through $target, so the form-level proxies
+        // above never see them. Per-control listeners ensure the proxy logic runs.
+        // Tracked on $form.reassociatedListeners for unbindForm cleanup.
+        //
+        // Skipped events:
+        //  - 'reset': fires on the form directly when reset() is called or a reset
+        //    button submits to the form, regardless of where the button lives. The
+        //    form-level reset listener above captures this for both cases.
+        //  - 'submit': fires on the form directly when submit() is called or a submit
+        //    button submits. Same reasoning as reset.
+        for (let _rIdx = 0, _rLen = $target.elements.length; _rIdx < _rLen; _rIdx++) {
+            let $rEl = $target.elements[_rIdx];
+            if (!$target.contains($rEl)) {
+                addListener(gina, $rEl, 'keydown', keydownProxyHandler);
+                $form.reassociatedListeners.push({ el: $rEl, evt: 'keydown', fn: keydownProxyHandler });
+                addListener(gina, $rEl, 'keyup', keyupProxyHandler);
+                $form.reassociatedListeners.push({ el: $rEl, evt: 'keyup', fn: keyupProxyHandler });
+                addListener(gina, $rEl, 'focusin', focusinProxyHandler);
+                $form.reassociatedListeners.push({ el: $rEl, evt: 'focusin', fn: focusinProxyHandler });
+                addListener(gina, $rEl, 'focusout', focusoutProxyHandler);
+                $form.reassociatedListeners.push({ el: $rEl, evt: 'focusout', fn: focusoutProxyHandler });
+                addListener(gina, $rEl, 'change', changeProxyHandler);
+                $form.reassociatedListeners.push({ el: $rEl, evt: 'change', fn: changeProxyHandler });
+                addListener(gina, $rEl, 'click', clickProxyHandler);
+                $form.reassociatedListeners.push({ el: $rEl, evt: 'click', fn: clickProxyHandler });
+            }
+        }
+
 
 
 
@@ -5904,7 +5998,9 @@ function ValidatorPlugin(rules, data, formId) {
             , linkId        = null
             , buttonId      = null
         ;
-        $buttonsTMP = $target.getElementsByTagName('button');
+        // Owner-aware so reassociated submit buttons (<button form="X" type="submit">
+        // outside $target's subtree) are bound to the correct form.
+        $buttonsTMP = getOwnedElements($target, 'button');
         if ( $buttonsTMP.length > 0 ) {
             for (let b = 0, len = $buttonsTMP.length; b < len; ++b) {
                 if ($buttonsTMP[b].type == 'submit') {
@@ -5913,7 +6009,7 @@ function ValidatorPlugin(rules, data, formId) {
             }
         }
 
-        // binding links
+        // binding links — DOM-tree only; <a> doesn't participate in HTMLFormControlsCollection
         $buttonsTMP = $target.getElementsByTagName('a');
         if ( $buttonsTMP.length > 0 ) {
             for (let b = 0, len = $buttonsTMP.length; b < len; ++b) {