Cannot progresForm if an error is corrected but can submit if no errors are made

Hi @sebastianpetrovski

I hope you are doing well today.

Can you export your form, upload it to google drive or dropbox and share a link in your next reply so that we could test this form on our side?

Also plase mention in your next reply those required fields and on which steps we should look for them.

Kind Regards,
Kris

Hi @wpmudevsupport13 thanks fo your reply!

The export failed, but I was able to copy and past the text in a google docs. I hope that’s ok?

The required fields are on the second page and are “First Name” and “Email” and there is a consent checkbox also.

Please see the forminator code here: https://docs.google.com/document/d/13ItY1XRLebKNDPmQYUK0EpxU_V0PR48KhGXYtdx8zT8/edit?usp=sharing

Look forward to hearing from you,

Sebastian

Hi @sebastianpetrovski

Thank you for response!

Unfortunately, this shared code cannot be imported as it gets modified (some characters) too much by the Google Docs editor – so we can’t test it.

Could you please try again but this time instead put both form export code and your custom JS at https://pastebin.com as two separate pastes and then share links to both of them in your response below?

Thank you in advance!

Best regards,
Adam

Hi,

Sorry about that, I was unaware of the google docs problem.

Please try this link for the export code: https://pastebin.com/iwJCta2A

And this link for the JS: https://pastebin.com/A5D26i3n

Look forward to hearing from you.

Sebastian

Hi @sebastianpetrovski

Thank you!

This worked and I could import form and code to my test setup.

I was a bit confused initially as the form is heavily customized and you are hiding next/prev buttons and use solely the JS code to handle paging. Additionally, I had to slightly modify the code as it was theme-dependant and also not a single field on form was set to required.

But all in all, I was able to make it work on my end and test and the issue is actually related to the code.

If you “unhide” standard prev/next buttons (by commenting out display:none in custom CSS) and use those buttons to navigate – regardless of whether code is there or not – form works. If you use the “continue” (so the one handled by code) button, it’s happening.

So that’s not a bug in the plugin but rather some “glitch” related to custom code. My assumption here is that it’s probably not triggering (or “re-triggering”) some validation routines but I need to consult that with our developers.

I’ve asked them already to look into that and they’ll check it but I’d appreciate some patience.

They are dealing with a lot of complex task on daily basis and their response time may be a bit longer than ours here. I or one of my colleagues will update you here once we got feedback on this form our developers.

Best regards,
Adam

Hello @sebastianpetrovski ,

Pleas try the updated code:

<script>
     window.laytheme.on("newpageshown", function() { 
        
        jQuery(document).on('after.load.forminator', function(e, form_id) {

            var next_button = document.querySelector('.forminator-button-next'),
                click_event = new CustomEvent('change_evt'),
                clickable_elements = document.querySelectorAll('.next-on-click .forminator-radio-label'),
                radios = document.querySelectorAll('.next-on-click input[type="radio"]');

            // Initialize the hue for the first element
            var lastHue = Math.floor(Math.random() * 360);

            // Assign random bright and saturated background color to each clickable element when the form loads
            clickable_elements.forEach(clickable_element => {
                var randomColors = getRandomColors();
                clickable_element.style.backgroundColor = randomColors.backgroundColor;
                clickable_element.style.boxShadow = <code>0 0 10px ${randomColors.shadowColor}</code>;
                clickable_element.addEventListener('click', wpmudev_clickables_event_callback);
            });

            function wpmudev_clickables_event_callback() {
                radios.forEach(radio => {
                    radio.addEventListener('click', wpmudev_change_evt_callback);
                });

                // Assign random bright and saturated background color to the clicked element
                var randomColors = getRandomColors();
                this.style.backgroundColor = randomColors.backgroundColor;
                this.style.boxShadow = <code>0 0 10px ${randomColors.shadowColor}</code>;
            }

            function wpmudev_change_evt_callback(e) {
                e.stopImmediatePropagation();
                if (e.currentTarget.checked) {
                    jQuery('.forminator-button-next').trigger('click');
                }
            }

            function getRandomColors() {
                // Generate a random color with minimum saturation (100), constant brightness (50),
                // and ensuring a minimum separation of 60 degrees in hue from the previous color
                var minSaturation = 100;
                var constantBrightness = 50;
                var minHueSeparation = 60;

                // Generate a new hue ensuring the minimum separation from the last hue
                var newHue = (lastHue + minHueSeparation) % 360;
                lastHue = newHue;

                var s = minSaturation;
                var l = constantBrightness;

                var backgroundColor = <code>hsl(${newHue}, ${s}%, ${l}%)</code>;
                var shadowColor = backgroundColor; // Set shadow color to be the same as the background color

                return { backgroundColor, shadowColor };
            }

        });

        setTimeout(function() {
            jQuery('.forminator-custom-form').trigger('after.load.forminator');
        }, 100);

    });
</script>

kind regards,
Kasia

Hi Kasia,

It works! Thanks so much!

Take care,

Sebastian

Hi @sebastianpetrovski,

Hope this message finds you well and glad to hear the code is working.

Please let us know if we can mark this issue as solved. Thanks.

Cheers,
Laura

Hi Laura,

Yes, thanks so much ??