How to work with jquery custom validation for hubspot form

Develop, Build & Integrate APIs & Integrations
1

How to work with jquery custom validation for hubspot form
I want form field email and website belongs to same domain for e.g email - nutan@xtensible.in and website - www.xtensible.in
So want to validate it with custom validation

2

Hi @nutan, we don’t have a very easy way to override HubSpot default validation with custom validation, but you should be able to put your own validation code in the onFormSubmit callback that’s detailed here: https://developers.hubspot.com/docs/methods/forms/advanced_form_options. This thread goes over a few more options: Integration with JQuery Validator - customized validation you may want to explore, as does this Medium article: https://rschu.me/prevent-the-submit-of-any-hubspot-forms-after-a-successful-validation-5e1f230b14f1

3

Can you please provide an updated solution? This doesn’t work as the onSubmit method is not blocking.

Thanks!

4

Looking for a solution to this too. The previously accepted solution does not override hubspots onformsubmit

5

Hello everyone. I’am currently able to add custom validation to hubspot forms using the event “onFormReady” and the lib jquery-validate.

The key is to prevent the submit button to submit if the form is not valid. To do that I add this click event :

jqueryForm.find('input[type="submit"]').click((e) => {
 if (!jqueryForm.valid()) {
 e.preventDefault();
 }
});

I hope this can help. I also hope the hubspot team will not add a breaking change because adding custom validation is very important for us. We need it for email and phone number.

6

Hi ACourdille,

I’ve tried to follow your suggestion of using onFormReady and the jquery-validate library, but still can’t seem to make it work :confused: It still submits regardless. Would you mind sharing some more of your code, so I can see what I’m missing?

Thanks!

7

Hi @MElmvang,

I’m gonna give you more context. I’m using vuejs in my project. In the mount method provided by vuejs in my component, I add this function:

window.onHubspotFormReady = (jqueryForm) => {
 this.hubspotFormCustomizer(jqueryForm);
};

This function is called because I have configured my hubspot script like that:

hbspt.forms.create({
 portalId: '<portalId>',
 formId: '<formId>',
 onFormReady: function (jqueryForm) {
 window.onHubspotFormReady(jqueryForm);
 },
 onFormSubmit: function (jqueryForm) {
 window.onHubspotFormSubmit(jqueryForm);
 },
 onFormSubmitted: function (data) {
 window.onHubspotFormSubmitted(data);
 },
 target: '.c-form-modal__form-container'
});

And this is my hubspotFormCustomizer method (I kept only the end of the method’s content):

public hubspotFormCustomizer(jqueryForm) {
 jqueryForm.find('input[type="submit"]').click((e) => {
 if (!jqueryForm.valid()) {
 e.preventDefault();
 }
 });
}

jqueryForm.valid() is provided by the library https://jqueryvalidation.org I use. But you can perform validation whatever you want.