Why is the submit Form fired in the parent Marionette.LayoutView when submitting from Marionette.ItemView?

Question

JavaScript

Good time of the day. The problem is that you have to sit at work on weekends. I create a view of Marionette.LayoutView in the template of which there is a form with a submit.

define(function (require) {
    "use strict";

    var FormModel = require("А"),
        ConfirmCodeView = require("..."),
        Template = require("А"),
        
    require("user/behaviors/behaviors");

    var globalChannel = Backbone.Wreqr.radio.channel("global"),
        ...
        FormView;

    FormView = Marionette.LayoutView.extend({
        className: "confirm-personal-data-view",
        getTemplate: function () {
           return Template;
        },
        
        behaviors: {
            KeyboardScroll: {
                scrollEl: "form .content"
            },
            RequiredField: {},
            ProfileName: {},
            ProfileValidation: {}
        },

        ui: {
            form: "form"
        },

        initialize: function (options) {
            this.model = new FormModel({...});
        },

        onRoute: function (step, confirmMethod, requestId) {
            if (confirmMethod && requestId) {
                
                this.addRegions({
                    phoneConfirm: "#region-phone-confirm"
                });
       
                this.getRegion("phoneConfirm").show(new ConfirmCodeView({
                    ...
                }));
            }
        },

        modelEvents:  {
            ...
        },

        events: {
            ...
        },



        submitForm: function () {
            console.log("dataSubmit");
            ...
        }
   
    });

    return FormView;
});

Through the region, I display the child view ConfirmCodeView - Marionette.ItemView. The template of which also has a form with a submit

define(function (require) {
    "use strict";

    var i18n = require("i18n"),
        templateHelpers = require("app/template-helpers"),
        FormModel = require("Б"),
        template = require("Б");
    require("user/behaviors/behaviors");

    var modalChannel = Backbone.Wreqr.radio.channel("modal"),
        FormView;

    FormView = Marionette.ItemView.extend({
        className: "confirm-personal-phone-view",
        template: template,

        behaviors: {
            KeyboardScroll: {
                scrollEl: "form .content"
            },
            RequiredField: {},
            ProfileValidation: {}
        },

        ui: {
            form: "form[name=verify-code]"
        },

        initialize: function (options) {
           
            this.model = new FormModel({
                ...
            });
        },

        events: {
            ...
        },


        submitForm: function () {
            console.log("codeSubmit");
        }
    });

    return FormView;
});

The problem is that clicking Input[type=submit]or this.ui.form.submit() from the child ConfirmCodeView - Marionette.ItemView causes submitForm to fire ONLY in the parent LayoutView.
The option of directly calling the function this.submitForm()when the button is clicked is not suitable, since in bihaviors the SUBMIT event from the View is caught and the check, focus and scroll of empty fields are triggered, and if all the rules are fulfilled submitForm().
Can someone tell me what it could be related to? I didn’t post the event handling and behaviors code, because I think that the problem is the lack of some theoretical knowledge.

Answer 1

Blocked event bubbling in child form.

submitForm: function(e) {
    if (e && e.preventDefault) {
        e.preventDefault();
    }
}