Correcting the Form Action & Preventing Default

Hey @Amine!

Are you referring to the Stimulus action submitForm? Or the Symfony action that handles the form submit? That word "action" is one we like to overuse :)

Cheers!

Hey @weaverryan

I'm talking about action (stimulus term) and exactly the relance action

Thank you man :)

Hey @Amine!

Sorry for dropping this! I believe the answer is simply that I wanted to submit the form via Ajax instead of a full, traditional, page reload submit. So I added the submitForm Stimulus action that handles the form via Ajax.

These days, I would almost definitely solve this with Turbo (using the native Turbo Ajax form submit or a <turbo-frame> if needed.

Cheers!

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 ❤️

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!

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