Prevent Form Submit

By: David Diller | Asked: 04/11/2024
ForumsCategory: Code HelpPrevent Form Submit
David Diller asked 1 month ago
Hello , I added a Braintree hosted field section to one of my forms, and am trying to prevent the form submission if there is an error in the hosted field. This is the function that is handling the error , I am getting the alert to trigger and show, but when you acknowledge (click ok ) it continues the form submission.  Thanks for any help.
 function(hostedFieldsErr, hostedFieldsInstance) {
            if (hostedFieldsErr) {
                console.error(hostedFieldsErr);
                return;
            }

            submit.removeAttr('disabled');

            // Fill in the credit card fields
            $('#ccnum').val('4111111111111111'); // Example card number
            $('#cvvnum').val('123'); // Example CVV
            $('#expmonth').val('01 - January'); // Example expiration month
            $('#expyear').val('2023'); // Example expiration year
            $('#postalcode').val('12345'); // Example postal code

            form.on('submit', function(event) {
                if (errorOccurred) {
                    event.preventDefault(); // Prevent form submission only if an error occurred
                    return;
                }

                event.preventDefault(); // Always prevent default form submission

                hostedFieldsInstance.tokenize(function(tokenizeErr, payload) {
                    if (tokenizeErr) {
                        console.error(tokenizeErr);
                        alert('There was a problem with your CC info');
                        errorOccurred = true; // Set flag to true if an error occurred
                        return;
                    }
                    console.log('Got a nonce: ' + payload.nonce);

                    $('#field_1n6vl').val(payload.nonce);

                    // If there are no tokenize errors, submit the form
                    if (!errorOccurred) {
                        form.submit(); // Submit the form only if there are no errors
                    }
                });
3 Answers
Victor Font answered 1 month ago
I'm not following everything in your post. You said you got an alert to trigger. What alert?
Victor Font replied 1 month ago

I also checked the Braintree documentation. Did you install the PHP SDK on your server or are you using another SDK. You're missing a lot of details that could help with troubleshooting. Plus, you never set a value for errorOccurred before you set it to true in the nested function. That doesn't follow PHP variable scoping rules. Please be very specific with what you've done so far.

David Diller answered 1 month ago
Hi Victor, thanks for the response. I have the sdk installed and the actual Braintree hosted form is working properly. The issue that I am having is when there is an error ( empty fields etc.) on the Braintree form information:
if (errorOccurred) {
                    event.preventDefault(); // Prevent form submission only if an error occurred
                    return;
           }
The form submission is not being stopped. It will show the error alert from my code
alert('There was a problem with your CC info');
but, then it continues with the form submission once you click ok on the javascript alert. The
event.preventDefault(); 
Is not stopping the submission.
I have the form submitting through Ajax.

Victor Font replied 1 month ago

You have not provided enough details. You need someone to do some hands on debugging on your site and step through the code line by line using XDebug or Kint. I suggest you engage a developer for a couple of hours to help you. Here are some resources:

https://formidable-masterminds.com/project-application/

https://formidable-masterminds.com/developers-directory/

Rob LeVineRob LeVine answered 1 month ago
For anyone who experiences this or a similar issue, here's the solution I came up with for David. Instead of keying off the form's submit event, I changed the submit button to not "auto-submit" and then set up a listener on the button. When the click is processed, if there is an error, nothing happens beyond the error message. If there's no error, the form.submit() event is called.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right