Создание нескольких AJAX-форм на одной странице в Symfony 4

Question

Я хотел бы создать несколько форм на одной странице в ajax, и если форма недействительна, то следующая форма не может быть загружена.

У меня есть 3 шага:

• Регистрация
• Выбор предложения
• Оплата

Возможно ли это?

Я пытался отправить форму, но мое состояние не помоглоработа, моя регистрационная форма загружается во второй раз ниже первой формы:

if ($form->isSubmitted() === true && $form->isValid() === true) {}

Мой контроллер:

  /**
 * @Route("/inscription", name="akp_inscription", methods={"GET", "POST"})
 *
 * @Security("is_granted('IS_AUTHENTICATED_ANONYMOUSLY')")
 */
public function inscriptionAction(): Response
{
    return $this->render('administration/securite/inscription.html.twig');
}

/**
 * @Route("/ajax/inscription-form", name="akp_ajax_inscription", condition="request.isXmlHttpRequest()", methods={"POST"})
 */
public function ajaxInscriptionForm(Request $request): Response
{
    $utilisateur = new User();

    $form = $this->createForm(UserType::class, $utilisateur);
    $form->handleRequest($request);

    if ($form->isSubmitted() === true && $form->isValid() === true) {
        $emailAlreadyExist = $this->entityManager->getRepository(User::class)->findOneBy([
            'email' => $utilisateur->getEmail(),
        ]);

        $usernameAlreadyExist = $this->entityManager->getRepository(User::class)->findOneBy([
            'username' => $utilisateur->getUsername(),
        ]);

        if ($emailAlreadyExist !== null) {
            $this->addFlash('danger', 'Cet email n\'est pas disponible');
            $this->redirectToRoute('akp_inscription');
        }

        if ($usernameAlreadyExist !== null) {
            $this->addFlash('danger', 'Ce pseudo n\'est pas disponible');
            $this->redirectToRoute('akp_inscription');
        }

        $this->entityManager->persist($utilisateur);
        $this->entityManager->flush();

        return $this->render('administration/securite/ajax/choix_offre_form.html.twig');
    }

    return $this->render('administration/securite/ajax/inscription_form.html.twig', [
        'form' => $form->createView(),
    ]);
}

/**
 * @Route("/ajax/get-choix-offre-form", name="akp_ajax_inscription_choix_offre", condition="request.isXmlHttpRequest()", methods={"POST"})
 */
public function ajaxGetChoixOffreForm(Request $request): Response
{
    return $this->render('administration/securite/ajax/choix_offre_form.html.twig');
}

/**
 * @Route("/ajax/get-paiement-form", name="akp_ajax_inscription_paiement", condition="request.isXmlHttpRequest()", methods={"POST"})
 */
public function ajaxGetPaiementForm(Request $request): Response
{
    return $this->render('administration/securite/ajax/paiement_form.html.twig');
}

Мой основной вид:

    {% extends 'site/layout/layout.html.twig' %}

{% set pageTitle = 'Inscription' %}

{% block title %}{{ pageTitle }}{% endblock %}

{% block body %}
    <div class="container">
        <div class="row" id="informations_personnelles"></div>

        <div class="row">
            <div class="col-xs-12">
                <img src="{{ asset('loader/spinner.gif', 'image_site') }}" alt="Loader" id="spinner" class="img-responsive center-block">
            </div>
        </div>

        <div class="row" id="choix_offre_form">

        </div>

    </div>
{% endblock %}
{% block js %}
    <script>
        $(() => {
            $("#spinner")
                .hide();

            $.ajax({
                type: "POST",
                url: '{{ path('akp_ajax_inscription') }}',
                beforeSend: (() => {
                    $("#informations_personnelles")
                        .html("");
                    $("#spinner")
                        .show();
                }),
                complete: (() => {
                    $("#spinner")
                        .hide();
                }),
                success: ((data) => {
                    $("#informations_personnelles")
                        .html(data);
                }),
            });

            $(document).on("submit", "form#form-informations-personnelles", function (e) {
                e.preventDefault();

                $("#spinner").show();

                console.log('submit');

                $.ajax({
                    type: "POST",
                    url: '{{ path('akp_ajax_inscription') }}',
                    beforeSend: (() => {
                        $("#choix_offre_form").html("");
                        $("#spinner").show();
                    }),
                    complete: (() => {
                        $("#spinner").hide();
                    }),
                    success: ((data) => {
                        $("#choix_offre_form").html(data);
                    }),
                })
                 .done(function () {
                     console.log("OK");
                 })
                 .fail(function () {
                     console.log("Erreur");
                 });
            });
        });
    </script>
{% endblock %}

Мойвид пользовательской формы:

    {{ form_start(form, {'action': path('akp_inscription'), 'method': 'POST', 'attr': {'id': 'form-informations-personnelles'}}) }}

{{ form_errors(form) }}

<div class="col-md-6 col-md-offset-3 col-xs-12">
    {{ form_row(form.email) }}
</div>

<div class="col-md-6 col-md-offset-3 col-xs-12">
    {{ form_row(form.username) }}
</div>

<div class="col-md-6 col-md-offset-3 col-xs-12">
    {{ form_row(form.dateNaissance) }}
</div>

<div class="col-md-6 col-md-offset-3 col-xs-12">
    {{ form_row(form.plainPassword) }}
</div>

<div class="col-md-6 col-md-offset-3 col-xs-12">
    {{ form_widget(form.submit) }}
</div>

{{ form_end(form) }}