forms - Symfony 3.4 和模态表单验证

Question

我正在一个带有模态表单的 Symfony 3.4 项目中工作，感谢 RaresModalBundle，这部分非常容易实现。我的问题！？！？表单的约束验证不起作用，因为我找不到一种方法来保持模式打开或重新打开它并出现错误。

我阅读了很多文章，但找不到可靠的解决方案。大约一周左右，我发现 jquery 有一个名为 jqueryvalidation 的库，它有助于验证表单，但是我阅读和分析的示例到目前为止在我的项目中不起作用......当我单击提交按钮时，模式仍然关闭没有正确的验证.

但是如果我点击外部模式，我可以看到验证器工作，问题仍然存在于提交按钮中......这是控制器和模式的代码：

/**
     * Función encargada de generar el formulario para agregar un nuevo depósito.
     *
     * Se autorizan métodos GET y POST. El primero para acceder al formulario y el segundo para
     * recibir el mismo.
     *
     * @Route("/agregar", name="agregar_depositos", methods={"GET", "POST"})
     *
     * @param Request $request
     * @return RedirectResponse|Response
     */
    public function agregarDepositos(Request $request)
    {
        $deposito = new Deposito();
        $form = $this->createForm('AppBundle\Form\DepositoType', $deposito);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $em = $this->getDoctrine()->getManager();
            $em->persist($deposito);

            try {
                $em->flush();
                $this->addFlash('success', 'El depósito '.$deposito->getNombre().' ha sido insertado correctamente.');
            }catch (DBALException $e){
                $this->addFlash('error', 'El depósito '.$deposito->getNombre().' ya existe en la base de datos.');
            };

            return new ModalRedirectResponse($this->generateUrl('listar_depositos'));
        }

        return $this->render('registro/deposito/agregar.html.twig', array(
            'deposito' => $deposito,
            'form' => $form->createView(),
        ));
    }

{% extends '@RaresModal/baseModal.html.twig' %}

{% block modalContent %}
    {{ form_start(form, {'action': path('agregar_depositos')}) }}
        <div class="modal-header">
            <h5 class="modal-title m-0 font-weight-bold text-secondary"><i class="fas fa-fw fa-share-square"></i> Agregar Depósito</h5>
        </div>
        <div class="modal-body">
            <div class="input-group mb-3" style="padding-top: 15px">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1"><i class="far fa-fw fa-building"></i></span>
                </div>
                {{ form_widget(form.nombre) }}
            </div>
        </div>
        <div class="modal-footer">
            <div>
                <button type="submit" class="btn btn-primary btn-sm btn-icon-split">
                <span class="icon text-white-50">
                    <i class="fas fa-save"></i>
                </span>
                    <span class="text">Guardar</span>
                </button>
            </div>
            <div>
                <button type="button" class="btn btn-secondary btn-sm btn-icon-split" data-dismiss="modal">
                <span class="icon text-white-50">
                    <i class="fas fa-times"></i>
                </span>
                    <span class="text">Cancelar</span>
                </button>
            </div>
        </div>

        <script type="text/javascript">
            $( document ).ready( function () {
                $( "#deposito-form" ).validate( {
                    rules: {
                        'appbundle_deposito[nombre]': {
                            required: true,
                            minlength: 3
                        }
                    },
                    messages: {
                        'appbundle_deposito[nombre]': {
                            required: "Este campo es obligatorio.",
                            minlength: "Este campo debe contener 3 o más caracteres."
                        }
                    },
                    errorElement: "em",
                    errorPlacement: function ( error, element ) {
                        // Add the `invalid-feedback` class to the error element
                        error.addClass( "invalid-feedback" );

                        if ( element.prop( "type" ) === "checkbox" ) {
                            error.insertAfter( element.next( "label" ) );
                        } else {
                            error.insertAfter( element );
                        }
                    },
                    highlight: function ( element, errorClass, validClass ) {
                        $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
                    },
                    unhighlight: function (element, errorClass, validClass) {
                        $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
                    }
                } );

            } );
        </script>
    {{ form_end(form) }}
{% endblock %}

对不起我的英语... BR ...

标签： formssymfonyvalidationmodal-dialog

Answer 1

好的......经过一些额外的搜索，当然，尝试和错误，我的问题的解决方案是：

1. 向提交按钮添加一个类。例如：创建按钮
2. 将以下行添加到模态视图中的 javascript 块中：

$(".createButton").click(function(e) {
    if (!$('#deposito-form').valid()) {
        e.preventDefault()
    }
});