Wrapping .modal-body and .modal-footer elements with <form> element causes E032 error

[Blackbaud-PaulCrowder]

Rule E032 states that .modal-body must be a child of .modal-content and .modal-footer must be a child of .modal-content, requiring that they not only be a child but a direct descendent of .modal-content. This is a problem when I want to group the contents of a modal into one form element so that the footer submit and cancel buttons behave properly (responding to the Enter key, submitting the form, etc.). Here is some sample code that causes the error:

    <form action="submit.html" method="post">
        <div class="modal-header"><h4>My header</h4></div>
        <div class="modal-body">
            <input type="text" name="someText" />
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" type="submit">Save</button>
        </div>
    </form>

Does this mean I can't use HTML forms in the way they were intended in this scenario?

[zacechola]

Try changing

<div class="modal-content"> 
  <form> ... </form>
</div>

To

 <form class="modal-content"> ... </form>

[Blackbaud-PaulCrowder]

Thanks. That would work beautifully if I had complete control over the markup when building a modal, but I'm using Angular UI Bootstrap and their template includes <div class="modal-content"></div> so I don't have an opportunity to specify my own .modal-content element.

Is there a specific problem that presents itself when a modal header\body\footer element is not a direct descendent of a .modal-content element? When I inspect element using Chrome's dev tools I don't see any CSS rules with a selector like .modal-content > .modal-body that would require this specific hierarchy. I'd like to file an issue with Angular UI Bootstrap so they can address their markup but I want to provide the reasoning behind this rule to make a more compelling case.

[zacechola]

The problem E032 addresses is related to this SO question, specifically where an author didn't contain elements within .modal-content properly.

Generally speaking, Bootlint attempts to lint for the exact sort of markup found in the documentation, with a certain level of strictness on direct parents and children for elements because extraneous elements can generally cause some issues. This isn't one of those cases.

Ideally here you'd be able to use the form attribute on your submit button to declare the relationship between the <form> and the <button> but IE doesn't support that yet (and doesn't look to be on the Edge list either sigh), so you're probably looking at a JS solution.

That, or just disable E032's message here.

[Blackbaud-PaulCrowder]

So is there a chance this rule can be relaxed to require that the header/body/footer elements are descendants of .modal-content but not necessarily direct descendants? That would address my issue and still address the issue in the SO question.

[rdejuana]

Is there any reason we can't wrap .modal-header, body, and footer with a form?

.modal-content > form > [.modal-header, .modal-body, .modal-footer]

E032 claims there are "scrolling issues", but thats rather vague.