Symfony 3.4 和模态表单验证

Posted 2023-02-16

【中文标题】Symfony 3.4 和模态表单验证

【英文标题】：Symfony 3.4 and Modal Form Validation

【发布时间】：2020-10-05 05:45:10

【问题描述】：

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

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

但是，如果我在 de modal 之外单击，我可以看到验证器正在工作，问题仍然存在于 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……

【参考方案1】：

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

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

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