如果嵌入的烧瓶 wtf 表单无法验证，则扩展 bootstrap 手风琴面板主体

Question

我有一个 flask-wtf 表单，其字段分布在两个 accordion panel-bod[ies] 中，如下面的代码片段所示。

如果表单在提交时验证失败，我希望展开两个面板主体[ies]，这样任何验证错误都会很明显（否则错误将隐藏在折叠的主体下。

我怎样才能做到这一点？

下面的当前代码片段。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          1. Heading One
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
          <form class="form form-group" method="post" role="form">
              <div>{{ wtf.form_field(form.field1) }}</div>
              <div>{{ wtf.form_field(form.field2) }}</div>
              <div>{{ wtf.form_field(form.field3) }}</div>
              <div>{{ wtf.form_field(form.field4) }}</div>
          </form>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          2. Heading Two
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
          <form class="form form-group" method="post" role="form">
              <div>{{ wtf.form_field(form.field5) }}</div>
              <div>{{ wtf.form_field(form.field6) }}</div>
              <div>{{ wtf.form_field(form.field7) }}</div>
          </form>
      </div>
    </div>
  </div>
</div>

<form class="form form-group" method="post" role="form">
  <div>{{ wtf.form_field(form.submit) }}</div>
</form>

Answer 1

最终我确定，在可折叠手风琴面板主体中设置可能无法验证的字段可能不是好的做法。因此，我已确保可折叠面板主体内的所有字段都不会通过验证（使用 SelectFields、IntegerRangeFields 等）。这对我的用例来说已经足够了（尽管我可以想到此解决方法不适用的其他用例）。

如果嵌入的烧瓶 wtf 表单无法验证，则扩展 bootstrap 手风琴面板主体

Expand bootstrap accordion panel-body if embedded flask wtf form fails to validate

html

accordion

twitter-bootstrap

flask-wtforms