Symfony 3.4 and Modal Form Validation - forms

Question

I'm working in a Symfony 3.4 project with modal forms, thanks to RaresModalBundle this part is super easy to implement. My problem!?!? The constraint validation of the forms don't work because I can´t find a way to keep modal open or reopen it with the errors.
I read many articles and I can't find a robust solution. Around one week I find that jquery has a library call jqueryvalidation that help to validate forms but the examples I read and analize don't work so far in my project... the modal still close when I click the submit button without the correct validation.
But if I click outside de modal I can see the validator working, the problem remains in the subtmit button... here are the code of the controller and the modal:
/**
* 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 %}
Sorry my english... BR...

Answer 1

Ok... after some additional search, and try and error of course, the solution for my problem is:
Add a class to the submit button. EG: createButtom
Add the following lines to the javascript block in the modal view:
$(".createButton").click(function(e) {
if (!$('#deposito-form').valid()) {
e.preventDefault()
}
});