if a form error slips through client side validation, show it

in a modal popup up front

www/maposmatic/templates/maposmatic/new.html

@@ -40,6 +40,9 @@ $('.multipleSelect').fastselect({
         $("#overlay-preview").attr("src","/media/img/overlay/"+itemModel.value+".jpg");
     }
 });
+{% if form.errors %}
+$('#error-modal').modal('show')
+{% endif%}
 {% endblock %}
 
 {% block extracss %}
@@ -61,6 +64,38 @@ $('.multipleSelect').fastselect({
 
 {% block page %}
 
+{% if form.errors %}
+<div class="modal" tabindex="-1" role="dialog" id="error-modal">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Form Errors</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+	{% for field in form %}
+          {% for error in field.errors %}
+          <div class="alert alert-danger">
+            <strong>{{field.label}} {{ error|escape }}</strong>
+          </div>
+          {% endfor %}
+	{% endfor %}
+	{% for error in form.non_field_errors %}
+        <div class="alert alert-danger">
+          <strong>{{ error|escape }}</strong>
+        </div>
+	{% endfor %}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}
+
 <div class="row">
   <div class="col-lg-12">
     <h1 id="submitmapform">{% trans "Generate your own map" %}&nbsp;&nbsp;<small><a href='{% url 'documentation_user_guide' %}#_creating_a_map_step_by_step' target='_blank'><i class='fa fa-question-circle'></i></a></small></h1>