网页上呈现的 Javascript 代码

Question

如果出现表单验证错误，我正在使用 bootbox JavaScript 库插件创建一个对话框。代码工作正常 - 对话框按预期显示 - 但代码本身也以某种方式打印/呈现在网页上：

我使用的代码是：

<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>

我尝试将 bootbox.alert 包裹在 <script> 周围，或者将整个代码片段包裹在 {% block jquery %} 周围，但都没有帮助。

编辑 1： 根据我的理解，我查看了控制台，输出似乎很好：截图

据我了解和阅读的有关它们的信息，出现的两个错误无关紧要。

我看到了一些其他线程，人们遇到了类似的困难，他们的问题通常与拼写错误等有关。这是表单的完整代码，也许你发现了我迄今为止没有发现的东西：

<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'/>

当我在引导箱周围放置任何脚本标签时，它不再起作用，没有脚本标签，对话框会完美弹出

编辑 2：在我的浏览器视图源的输出下方：

<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

只需添加<script>标签：

<form class='form-horizontal' method="POST" action=""> {% csrf_token %}
  <div class='form-group form-group-lg'>

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

另外请注意您还没有关闭<div>。

注意：这对用户来说可能很烦人，因为它会显示很多警报。所以我想说，最好收集所有消息并将其显示为一条消息：

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

Answer 2

我解决了这个问题：

1.) 我创建了一个新的 html 文件，其中仅包含包装在 <script> 标记中的引导箱警报代码。这有效：对话框按预期弹出，代码未显示在页面本身上

2.) 我开始将所有剩余的代码从旧的 html 文件逐步复制到新的 html 文件中，并检查引导箱警报是否仍在工作

3.) 最后，我的不工作的旧文件和工作的新文件之间的唯一区别是在我的新文件中这个代码 sn-p

<!-- 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>

在我的 base.html 文件中加载，我使用 {% extends "base.html" %} 来引用它。现在我的 html 中直接有这个 sn-p，一切正常。