Question

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

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..."/>
</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>标签中包含的bootbox警报代码。这工作：按预期弹出对话框，代码没有显示在页面本身

2。）我开始从旧的html文件到新的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中使用了这个片段，一切正常。

在网页

2 个答案: