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：我查看了控制台，输出似乎没问题，根据我的理解：Screenshot

据我了解和阅读的内容，显示的两个错误无关紧要。

我看到其他一些帖子，人们运行遇到了类似的困难，他们的问题通常与打字错误等有关。这是表格的完整代码，也许您发现了一些我目前还没有发现的东西：

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

当我在 bootbox 周围放置任何脚本标签时，它不再起作用，没有脚本标签，对话框弹出非常好

编辑 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 并检查引导框警报是否仍在工作

3.) 最后，我不能使用的旧文件和可以使用的新文件之间的唯一区别是在我的新文件中这个代码片段

<!-- 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 中直接有了这个片段，一切正常。

Javascript 网页上呈现的代码

Javascript Code rendered on webpage

jquery

django

bootbox