Block HubSpot form from submitting with jQuery validation rules

Other Questions HubSpot
1

I’m trying to stop a HubSpot form from going through when validation fails. I want to show error messages too if that’s doable.

The redirect URL gets set through PHP on my end. Here’s my current code setup:

hbspt.forms.create({
    css: '',
    portalId: 'your-portal-id-here',
    formId: 'your-form-id-here',
    onFormReady: function(){
        jQuery('#contactForm_your-form-id-here').validate({
            errorPlacement: function(errorMsg, field) {},
            rules: {
                first_name: { required: true },
                last_name: { required: true },
                user_email: { required: true },
                user_message: { required: true }
            },
            submitHandler: function(formElement, event) {
                event.preventDefault();
                window.open('current page link', '_self');
                formElement.submit();
                jQuery(updatedForm)
                var updatedForm = jQuery('#contactForm_your-form-id-here');
                window.setTimeout(function() {
                    updatedForm.html('<h3>Form submitted successfully</h3>');
                }, 1000);
            }
        });
    }
});

Any ideas on how to make this work properly?

2

You’re mixing HubSpot’s native form handling with jQuery validation, which creates conflicts. Skip submitHandler and use HubSpot’s onBeforeFormSubmit callback instead - it works much better since it hooks directly into HubSpot’s form lifecycle. Set up your validation rules in onBeforeFormSubmit and return false when validation fails. This stops the form from submitting to HubSpot entirely. You can trigger jQuery validation manually with the valid() method and only allow submission if it returns true. Couple other issues: you’re referencing updatedForm before declaring it, which will throw an error and break everything. Also, your errorPlacement function is empty, so users won’t see any validation messages. Either add actual error display logic or remove it to use jQuery’s default error placement.

3

Had the same problem with HubSpot forms and jQuery validation. Your issue is calling formElement.submit() right after event.preventDefault() - that just cancels out what you’re trying to do. You need to handle HubSpot’s form submission through their API instead. Use onBeforeFormSubmit in your HubSpot config rather than jQuery’s submitHandler. This callback fires before HubSpot processes anything, and you can return false to stop it. Run your jQuery validation manually with jQuery('#your-form').valid() inside this callback, then only return true if it passes. Also, you’re using updatedForm before declaring it. Move that var updatedForm line up above where you first use it. And check your errorPlacement function - if it’s not actually doing something with the errorMsg parameter, users won’t see what went wrong.