Symfony 3.4和模态验证

Question

我正在使用模态形式的Symfony 3.4项目中工作，这要归功于RaresModalBundle，这部分非常容易实现。我的问题！？！？表单的约束验证无法正常工作，因为我找不到保持模式打开或使用错误重新打开模式的方法。

我阅读了许多文章，但找不到可靠的解决方案。大约一个星期，我发现jquery有一个库调用jqueryvalidation可以帮助验证表单，但是到目前为止，我阅读和分析的示例在我的项目中仍然无法使用...当我单击提交按钮而没有正确的验证时，模式仍然关闭。

但是，如果我在模态外部单击，则可以看到验证器正在工作，问题仍然存在于subtmit按钮中……这是控制器和模态的代码：

/**
     * 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 ...

Answer 1

好吧...经过一些额外的搜索，然后尝试并出错，我的问题的解决方案是：

1. 将课程添加到提交按钮。 EG：createButtom
2. 将以下行添加到模式视图中的javascript块中：

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