django bootstrap modal form closes on invalid form data

Question

I am working on django + bootstrap modal where I am rendering ModelForm to the modal dialog.

The problem which I am facing is the modal form closes as soon as I click on submit button, it's showing errors on the modal form but it closes and the errors can be seen when the modal dialog is opened again.

I am not using any javascript or jquery, I am simply using html tag and handling post in the django view.

Please let me know what can be done to stop closing the dialog if the form is invalid.

modaldialog_modelform.html:

this file contain the code of the modal dialog with form which is rendered from view.

<div class="modal fade in" id="NewRecordModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="myModalLabel">Add New Transport</h3>
            </div>
            <div class="modal-body">
                <form action="" method="post">{% csrf_token %}
                    {% if form.errors %}<p class="form_field_error">Please correct the following fields</p>{% endif %}
                    {{ form|crispy }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" alt="Add Transport" value="Add Transport" class="btn btn-primary" />
            </div>
        </div>
    </div>
</div>

the above dialog is called from transport.html with below code:

<a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#NewRecordModalForm" data-backdrop="static">  
    <i class="fa fa-plus"></i>  
</a>

Answer 1

Seems page simply reloading and it's reloading in both cases ... you need ajax request (javaScript code) to your server by clicking on submit button, simplest way to do it using jQuery jQuery AJAX submit form