APIs & Integrations

nutan1
Participant

How to work with jquery custom validation for hubspot form

SOLVE

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

0 Upvotes
1 Accepted solution
cbarley
Solution
HubSpot Alumni
HubSpot Alumni

How to work with jquery custom validation for hubspot form

SOLVE

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

View solution in original post

0 Upvotes
6 Replies 6
ACourdille
Participant

How to work with jquery custom validation for hubspot form

SOLVE

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.

ACourdille
Participant

How to work with jquery custom validation for hubspot form

SOLVE

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.

MElmvang
Participant

How to work with jquery custom validation for hubspot form

SOLVE

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 😕 It still submits regardless. Would you mind sharing some more of your code, so I can see what I'm missing?

 

Thanks!

0 Upvotes
dmcknight
Member

How to work with jquery custom validation for hubspot form

SOLVE

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

cbarley
Solution
HubSpot Alumni
HubSpot Alumni

How to work with jquery custom validation for hubspot form

SOLVE

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

0 Upvotes
geekbleek
Participant

How to work with jquery custom validation for hubspot form

SOLVE

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

 

Thanks!