javascript - Javascript未将类添加到HTML元素

我偶然发现了一个有点奇怪的问题。我似乎无法在html元素上编辑该类。我一直在研究SO上的类似情况，但没有找到解决我问题的方法。唯一使这种情况有所不同的是，我正在使用Django框架来反映后端。我在这里的代码将“ form-control-danger”类添加到以某种方式接收到错误输入的所有输入字段。观察底部标签内的代码。

<form class="form" method="post" action="/register/">
        {% csrf_token %}
        {% for field in register_form %}
            {% if field.name != "agree_to_terms" %}
                <div class="input-group">
                    <span class="input-group-addon">
                        {% if field.name == "first_name" %}
                            <i class="now-ui-icons users_circle-08"></i>
                        {% elif field.name == "last_name" %}
                            <i class="now-ui-icons text_caps-small"></i>
                        {% elif field.name == "email" %}
                            <i class="now-ui-icons ui-1_email-85"></i>
                        {% elif field.name == "password1" %}
                            <i class="now-ui-icons ui-1_lock-circle-open"></i>
                        {% elif field.name == "password2" %}
                            <i class="now-ui-icons ui-1_lock-circle-open"></i>
                        {% endif %}
                    </span>
                    {{ field }}
                </div>
            {% else %}
                <div class="form-check">
                    <label class="form-check-label">
                        {{ field }}
                        <span class="form-check-sign"></span>
                        I agree to the
                        <a href="#">terms and conditions</a>.
                    </label>
                </div>
            {% endif %}
        {% endfor %}
        {% if error_fields_by_id %}
            <script>
            {% for field_id in error_fields_by_id %}
                document.getElementById("{{ field_id }}").setAttribute("class", "form-control-danger");
            {% endfor %}
            </script>
        {% endif %}
        <!-- If you want to add a checkbox to this form, uncomment this code -->
        <div class="card-footer text-center">
            <input type="submit" class="btn btn-primary btn-round btn-lg" value="Get Started">
        </div>
    </form>

这是输出的html代码的外观

<div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_email-85"></i>
      </span>
      <input type="text" name="email" value="[email protected]" class="form-control" placeholder="Email..." id="email" name="email" maxlength="254" />
  </div>
  <div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_lock-circle-open"></i>
      </span>
      <input type="password" name="password1" id="password1" class="form-control" required placeholder="Password..." name="password1" maxlength="254" />
  </div>
  <div class="input-group">
      <span class="input-group-addon">
              <i class="now-ui-icons ui-1_lock-circle-open"></i>
      </span>
      <input type="password" name="password2" id="password2" class="form-control" required placeholder="Password again..." name="password2" maxlength="254" />
  </div>
  <div class="form-check">
      <label class="form-check-label">
          <input type="checkbox" name="agree_to_terms" class="form-check-input" required checked id="agree-to-terms" name="agree_to_terms" />
          <span class="form-check-sign"></span>
          I agree to the
          <a href="#">terms and conditions</a>.
      </label>
  </div>
<script>
    document.getElementById("password1").setAttribute("class", "form-control-danger");
    document.getElementById("password2").setAttribute("class", "form-control-danger");
</script>

谢谢

最佳答案

我没有使用django，但我在这里看到“名称”重复

输入type =“ password” name =“ password1” id =“ password1” class =“ form-control”所需的占位符=“ Password ...” name =“ password1” maxlength =“ 254”