¿Cómo debo diseñar los errores de validación de Django con Bootstrap?

Cuando un formulario en Django tiene errores de validación, los errores se dan en una lista con clase errorlist.

A los elementos se les puede dar un estilo de error con Bootstrap configurando class="alert alert-error".

¿Cuál es la mejor manera de combinarlos y usar el estilo de error de Bootstrap para los errores de validación en los formularios de Django?

preguntado el 04 de julio de 12 a las 03:07

4 Respuestas

En Twitter Bootstrap, los elementos de entrada están encerrados entre "control-group" div or fieldset. Así que haría algo como esto en la plantilla.

{%for field in form %}
<div class="control-group {%if field.errors %}error{%endif%}">
{# render your field #}
</div>
{% endfor %}

Nota: En bootstrap, class="alert alert-error" parece ser para mensajes de alerta y no para errores específicos de campo.

Respondido 20 Jul 16, 02:07

Solo un breve comentario: con Bootstrap 3, necesita "has-error" en lugar de "error" como clase. - AndraD

también con Bootstrap 3 su grupo de forma no grupo de control. Vea abajo. - AdánG

En Bootstrap 3, los elementos de entrada están encerrados entre divs de "grupo de formularios" y la clase de error ha cambiado a tiene error.

{%for field in form %}
  <div class="form-group {%if field.errors %}has-error{%endif%}">
    {# render your field #}
  </div>
{% endfor %}

Respondido el 18 de enero de 16 a las 21:01

¡Ya está peinada! :)

Estas bibliotecas actúan como un envoltorio alrededor de su formulario y agregan los nombres de clase relevantes que se usan en Django Bootstrap, de modo que tiene un estilo base (predeterminado de bootstrap) listo para usar

Respondido 04 Jul 12, 06:07

Solución Bootstrap 4 Django

If <form class="was-validated>" devuelve la validación en su respuesta, esto funcionará para usted:

Este ejemplo funciona para el admin/change_form.html, pero es fácil convertirlo a su formulario cambiando adminform.form

Esto no funcionará para widgets múltiples como DateSelectorWidget

borrar class="was-validated"

{% if adminform.form.errors %} {# Delete this if you always want active validations #}
  <script type="text/javascript">
    {% for field in adminform.form %}
      var field_input = document.getElementById("{{ field.auto_id }}");
      if (field_input) {
        field_input.classList.add("is-{% if field.errors %}in{% endif %}valid");
      }
    {% endfor %}
  </script>
{% endif %}

Esto funciona para widgets múltiples como DateSelectorWidget pero podría presentar problemas si un campo se llama start y el otro start_time Mejoras apreciadas

{% if adminform.form.errors %} {# Delete this if you always want to see a validation #}
<script type="text/javascript">
  {% for field in adminform.form %}
    var field_input = document.getElementById("{{ field.auto_id }}");
    if (field_input) {
      field_input.classList.add("is-{% if field.errors %}in{% endif %}valid");
    } else {
      multi_widget_fields = document.querySelectorAll('[id^="{{ field.auto_id }}_"]')
      multi_widget_fields.forEach(function (element) {
        element.classList.add("is-{% if field.errors %}in{% endif %}valid");
      });
    }
  {% endfor %}
</script>
{% endif %}

respondido 03 mar '20, 15:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.