如何验证错误的模态形式并以相同的模态形式显示?

时间:2019-09-22 15:53:14

标签: django forms error-handling modal-dialog

我有一个django表单来创建/更新在引导模式(通过JQuery脚本启动)上显示的记录,我可以创建记录,但是当我输入de DDBB中已经存在的信息时,我得到了错误:

“ django.db.utils.IntegrityError:重复的键值违反了唯一约束 详细信息:密钥(descripcion)=(OC)已存在。“

我理解该错误是因为我将模型中字段的属性设置为唯一。

我试图覆盖表单中的clean()方法来捕获错误,但部分起作用,现在我没有收到完整性错误消息,但因此收到的表单是clean,但不是模态的,在他的情况下就是这样显示的:

form

我要寻找的是验证模式形式中的信息,并在出现错误的情况下(例如重复值)以相同的模式显示消息,而不是继续提交表单。

我对JQuery非常陌生,任何想法或指南都将非常有用。

谢谢。

作为参考,我到目前为止的代码是:

模型:

class Categoria(models.Model):
    descripcion = models.CharField(
        max_length=100,
        help_text='Descripción de la categoría',
        unique=True,
    )

    def __str__(self):
        return '{}'.format(self.descripcion)

    def save(self):
        self.descripcion=self.descripcion.upper()
        super(Categoria, self).save()

    class Meta:
        verbose_name_plural="Categorias"

观看次数:

class CategoriaNew(generic.CreateView):
    model=Categoria
    template_name = 'catalogos/categoria_form.html'
    context_object_name = 'obj'
    form_class = CategoriaForm
    success_url = reverse_lazy('catalogos:categoria_list') 
    login_url = 'base:login'

    def form_valid(self, form):
        form.instance.uc = self.request.user 
        return super().form_valid(form) 

class CategoriaEdit(generic.UpdateView):
    model=Categoria
    template_name = 'catalogos/categoria_form.html'
    context_object_name = 'obj' 
    form_class = CategoriaForm 
    success_url = reverse_lazy('catalogos:categoria_list')
    login_url = 'bases:login' 

    def form_valid(self, form):
        form.instance.um = self.request.user.id 
        return super().form_valid(form)

网址:

path('categoria/new', CategoriaNew.as_view(), name="categoria_new"),
path('categoria/edit/<int:pk>', CategoriaEdit.as_view(), name="categoria_edit"),

表格:

class CategoriaForm(forms.ModelForm):
    class Meta:
        model = Categoria
        fields = ['descripcion', 'estado']
        labels = {'descripcion':"Descripción de la categoría",
                    'estado':"Estado"}
        widget = {'descripcion' : forms.TextInput()}

    def clean(self):
        try:
            sc = Categoria.objects.get(
                descripcion=self.cleaned_data['descripcion'].upper()
            )
            if not self.instance.pk:
                raise forms.ValidationError(
                    "Ya existe una categoria con esta descripción")
            elif self.instance.pk:
                raise forms.ValidationError(
                    "Error en la edición, los valores ya existen")
        except Categoria.DoesNotExist:
            pass
        return self.cleaned_data 

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                'class':'form-control'
            })

表单html模板:

{% load static %} <div class="modal-dialog modal-lg">
    <div class="modal-content">
        {% if obj %}
        <form method="POST" role="form" class="form-inline" action="{% url 'catalogos:categoria_edit' obj.pk %}">
            {% else %}
            <form method="POST" role="form" class="form-inline" action="{% url 'catalogos:categoria_new'%}">
                {% endif %}
                {% csrf_token %}
                <div class="col-xl-12 col-md-12 mb-12">
                    {% if obj %}
                    <!--Si al cargar el formulario de creación/edición ya hay datos-->
                    <div class="card border-left-warning shadow h-100 py-2">
                        <!--se mostrará un borde de color amarillo-->
                        {% else %}
                        <!--Si al cargar el formulario de creación/edición No hay datos-->
                        <div class="card border-left-success shadow h-100 py-2">
                            <!--se mostrará un borde de color verde-->
                            {% endif %}
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                            {% if obj %} Editar {% else %} Nueva {% endif %} Categoría
                                            <!--De manera similar cambiamos el encabezado del formulario-->
                                        </div>
                                        <div class="dropdown-divider"></div>
                                        <div class="row justify-content-center">

                                            <div class="form-group col-md-7">
                                                <label for="id_descripcion">Descripción </label>
                                                <div class="form-group col-md-1"></div>
                                                <input type="text" name="descripcion" maxlength="100"
                                                    class="form-control" required id="id_descripcion"
                                                    placeholder="Ejem. 'Mi categoria'"
                                                    value="{% if obj %} {{obj.descripcion}} {% endif %}">
                                                    <div><br><br><br><br></div>

                                                <div class="form-check">
                                                    <label class="form-check-label"
                                                        for="id_estado">Estado de cat.</label>
                                                    <div class="form-group col-md-1"></div>
                                                    <input class="form-control" type="checkbox" name="estado"
                                                        id="id_estado" 
                                                        data-toggle="toggle"
                                                        data-style="fast"                                                     

                                                        {% if obj.estado %} checked {% endif %}>
                                                </div>
                                            </div>


                                            <!-- {{ form.as_p }} -->
                                        </div>
                                        <div class="form-text text-danger" id="form-error"></div>
                                        <div class="dropdown-divider"></div>
                                        <div class="row text-center">
                                            <div class="col">
                                                <a href="{% url 'catalogos:categoria_list' %}"
                                                    class="btn btn-danger"><span class="fad fa-undo"></span> Cancelar</a>
                                                <button type="submit" class="btn btn-primary"><span
                                                class="fad fa-upload"></span> Guardar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </form>
    </div> </div> 

打开和关闭模式的功能:

function abrir_modal(url) {
    $("#popup").load(url, function () {
        $(this).modal({
            backdrop: 'static',
            keyboard: false 
        })
        $(this).modal('show'); /*Mostramos el modal*/
    });
    return false; }

function cerrar_modal() {
    $('#popup').modal('hide'); /*Cerramos el modal*/
    return false; }

我启动模态表单以使用以下行从列表视图创建或编辑:

    <a class="btn btn-primary" href="#" onclick="return abrir_modal('{% url 'catalogos:categoria_new' %}')"><i class="fad fa-plus-circle fa-1x"></i>  Agregar categoría</a>

    {% if item.estado %}
     <i class="fad fa-power-off fa-2x" onclick="return abrir_modal('{% url 'catalogos:categoria_desactivar' item.id %}')"
    data-toggle="tooltip" data-placement="bottom" title="Desactivar {{item.descripcion}}" style="color:seagreen; cursor: pointer;"></i>
    {% else %}
    <i class="fad fa-power-off fa-2x" onclick="return abrir_modal('{% url 'catalogos:categoria_desactivar' item.id %}')" data-toggle="tooltip" data-placement="bottom" title="Activar {{item.descripcion}}"       style="color:silver; cursor: pointer;"></i>
{% endif %}

我的基本模板中的模式为:

<div class="modal fade" id="popup"></div>

0 个答案:

没有答案