Correcting the Form Action & Preventing Default

Hello!

I have the same problem that Macarena and Martín.

I try to use this modal example on my own project but error message are not displayed in the modal.
I have a 422 response from AJAX with the correct error message.

Can you help me please ?

I'm using Symfony 6.2 and Flowbite for the modal.

Hey @cctaborin!

Hmm. Let's see if we can figure this out! If you're using the jQuery ajax like we are in this tutorial (btw, you can also just use fetch() these days - it's built into the browser and works great) - then, irrc, if the server returns a 422 status code, then the Ajax call is seen as "failed". When I recorded, the Ajax call was returning a 200 status code when the validation errors happened.

Why the difference? Because starting in Symfony 6.2, when you use $this->render() in your controller and pass in a form value, Symfony now (correctly) changes the status code to 422 if the form has validation errors. This is GOOD, but it changes the behavior of the tutorial :). Sorry about that!

This what the fixed code should look like:

async submitForm() {
    const $form = $(this.modalBodyTarget).find('form');
    try {
        this.modalBodyTarget.innerHTML = await $.ajax({
            url: this.formUrlValue,
            method: $form.prop('method'),
            data: $form.serialize(),
        });
    } catch (error) {
        this.modalBodyTarget.innerHTML = error.message;
    }
}

That last error.message part I'm not 100% sure about. If that's wrong, console.log(error) to see what that is and where the HTML response might be. And please, if you get this working, let me know to help others :).

Cheers and thanks for bringing this up again!

Hey,
I just tried this and it work, you just need to use error.responseText.

Hey @weaverryan!

Thank you for your explanations!
It works very well with this.modalBodyTarget.innerHTML = error.message; (as @Djamina suggests).

Besides, your tutorials are great, keep it up!

Cheers!

Awesome! Thanks for the verifications! I'll get a note added to the tutorial to help others ❤️

I have put the code below inside _form.html.twig but when I click the button, it returns with the error:

Uncaught ReferenceError: test is not defined.

Is there a reason why scripts don't work?

<button onclick="test()">Try it</button>

<script>
    function test() {
        alert("Hello! I am an alert box!");
    }
</script>

I'd appreciate any help.

Hi!!, sorry me again....
I try this modal example in my own proyect but it not appear the error message in the modal, just an error in the console.
But if I execute the form normaly it have no problem with the validation.
Pleaseeeee helpp

Hello. The same thing happens to me too.

I have unsuccessfully tried to fire a checkValid() on the form before submitting via Ajax. I don't have much knowledge of Javascript so maybe it didn't work because I didn't know how to do it.

What I haven't finished understanding is that in some cases the invalid form is processed as expected, returning from the Ajax request with a 422 error, the HTML5 validation errors are shown in the form. In other cases, it returns with a 500 error. There, the form does not show HTML5 errors. Shows a symfony exception error. Ugly! That's why I've tried to validate the form before making the Ajax request. I think doing so would solve the problem.

Not a minor fact. If I submit the form from the submit button that contains the original Symfony form, everything works perfectly. Validations, automatic focus on required fields, etc.

The modal's submit button does not have the same behavior.

I appreciate any hint or solution.

Hey Martin,

Make sure your submit button is inside of the form, and submit that form via JS using that submit button. Also, take a look at some tips here: https://stackoverflow.com/a... - I believe they might be useful for you.

Otherwise, you can turn off HTML validation and base your validation on server side re-rendering the form with errors if there're any.

Cheers!

Hey Macarena I.

Which error is in console? Can you provide more information about issue =)

Cheers!

Hi team, great track! As there is no validation set in the source code, I guess you enabled auto mapping.

For those passing by, see https://symfonycasts.com/sc...

Hey Steven J.

Sorry for the confusion but if you open up the Product.php class you will see that we have some validation on the properties. If you have any other doubt, please let us know.

Cheers!

sorry, I was using an old code version, thank you for this course, really love it