title: Bootstrap Modal with WTF
body: <p>I got several user input fields inside Bootstrap Modal and I'm trying to do some validation before users can submit it.</p>
  
  <p>I've looked around several related articles and nothing has worked for me so far.</p>
  
  <p>So the main problem that I'm having is that, everytime I press submit, the modal window closes so that users cannot see the error messages. I want the modal window to stay open until a successful submission occurs.</p>
  
  <p>Below is my modal</p>
  
  <pre><code>&lt;button type="button" class="btn btn-default" data-toggle="modal" data-target="#editModal" style="float:right"&gt;
    &lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Edit
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="editModal" role="dialog" &gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content" &gt;
        &lt;div class="modal-header" &gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4&gt;Edit Your Login Information&lt;/h4&gt;
        &lt;/div&gt;
  
        &lt;div class="modal-body"&gt;
          &lt;form action="{{ url_for('.profile') }}" method='post' name='edit_user' class="form-horizontal" &gt;
            {{ user_edit_form.csrf_token }}
            &lt;div class="form-group col-xs-12 col-md-12 col-lg-12" style="background-color:white; !important "&gt;
              &lt;div class="col-xs-12 col-md-12 col-lg-12" &gt;
                {{ render_field(user_edit_form.first_name) }}
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-12 col-lg-12"&gt;
                {{ render_field(user_edit_form.last_name) }}
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-12 col-lg-12"&gt;
                {{ render_field(user_edit_form.email) }}
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-12 col-lg-12"&gt;
                {{ render_field(user_edit_form.institute) }}
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-md-12 col-lg-12"&gt;
                &lt;input class='btn btn-primary' id='uform' type='submit' value='UPDATE' style="float:right"/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the javascript that I'm trying to get it to work</p>
  
  <pre><code>&lt;script&gt;
    var formErrors = {% if user_edit_form.errors %}true{% else %}false{% endif %};
    $(document).ready(function() {
      if (formErrors) {
        $('.Modal').modal('show');
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help will be really appreciated!!</p>