Javascript Code rendered on webpage

Question

I am using the bootbox JavaScript library plugin to create a dialog box if a form validation error is raised. The code works fine - the dialog box appears as expected - but somehow the code itself is printed/ rendered on the webpage as well:

The code I am using is:

<form class='form-horizontal' method="POST" action=""> {% csrf_token %}
      <div class='form-group form-group-lg'>
       {% if form.email.errors %}
        {% for err in form.email.errors %}
          bootbox.alert("Verrate uns noch deine Mail :)")
        {% endfor %}
      {% endif %}
         <input required class='form-control' type="email" name="email"   placeholder="Deine Email..."/>
</form>

I tried wrapping the bootbox.alert around a <script> or wrap the whole code snipper around a {% block jquery %} but neither helped.

EDIT 1: I looked at the console and the output seems to be fine, according to my understanding: Screenshot

As far as I understood and by what I read about them, the two errors showing up do not matter.

I saw some other threads where people ran into similar difficulties and their problem was often related to a typo etc. Here is the full code for the form maybe you spot something I have not spotted so far:

<form class='form-horizontal' method="POST" action=""> {% csrf_token %}
<div class='form-group form-group-lg'>
        {% if form.email.errors %}
         {% for err in form.email.errors %}
          bootbox.alert("Verrate uns noch deine Mail :)");
         {% endfor %}
        {% endif %}
<input required class='form-control' type="email" name="email" placeholder="Deine Email..."/>
</br>
      {% if form.wunschrad.errors %}
        {% for err in form.wunschrad.errors %}
      <div class="alert alert-warning" role="alert">Verrate uns noch dein Wunschrad :)</div>
      {% endfor %}
      {% endif %}

    <select required class="form-control" type="text" name="wunschrad">
      <option value="" disabled selected>Dein Wunschrad...</option>
      <option>Sportlich (z.B. Rennrad oder Fixie)</option>
      <option>Klassisch (z.B. Holland- oder Waffenrad)</option>
    </select>
    </br>
      <input type='submit' value='Anmelden' class='btn btn-primary btn-lg'/>

when I put any script tags around the bootbox it does not work any more, without script tags the dialog box pops up perfectly fine

EDIT 2: Below the output from my browser's view source:

<form class='form-horizontal' method="POST" action=""> <input type='hidden' name='csrfmiddlewaretoken' value='EF6C3vzUocRy0TxoMnCvp0G4VNomkoBG' />
      <div class='form-group form-group-lg'>

              bootbox.alert("Hello world!");

<input required class='form-control' type="email" name="email" placeholder="Deine Email..."/>

 </div>
</form>

Answer 1

I solved the problem:

1.) I created a new html file including only the bootbox alert code wrapped in a <script> tag. This worked: dialog box popped up as expected and the code was not shown on the page itself

2.) I started copying all the remaining code step by step from the old to the new html file and checked if the bootbox alert is still working

3.) In the end the only difference between my not working old file and working new file was that in my new file this code snippet

<!-- JS dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- bootbox code -->
<script src="{% static 'js/bootbox.min.js' %}"></script>

was loading in my base.html file and I used {% extends "base.html" %} to reference to it. Now that I have this snippet directly in my html, everything works.