APIs & Integrations

GBulleri
Participant

Embed code: how to write a validation message?

Résolue

Hi,

 

I' am working with the embed code.

The Hubspot documentation says  to wrire custom code inside onFormSubmit

hbspt.forms.create({
      portalId: '',
      formId: '',
      onFormSubmit: function($form) {
        // YOUR SCRIPT HERE
        } 
});       

 

How to programmatically write  by jquery/javascript a validation error or  a message  like for  example "email must be formatted correctly"

 

GBulleri_0-1638708807102.png

 

 

0 Votes
1 Solution acceptée
Teun
Solution
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Embed code: how to write a validation message?

Résolue

Hi @GBulleri ,

You could do something like this:

window.addEventListener('message', event => {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
     const input = document.querySelector('input[name="property"]') // Change this to the property you want to validate
     // Error message
     const error = document.createElement('div')
     error.setAttribute('class', 'form-error-message')

     input.addEventListener('input', e => {
       if (e.currentTarget.value.length > 5) {
         // Time to display an error
         input.parentElement.appendChild(error)
       }
     })
  }
})

You would still need to use the 'onFormSubmit' event to prevent the form from submitting if this is unvalid.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


Voir la solution dans l'envoi d'origine

7 Réponses
Teun
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Embed code: how to write a validation message?

Résolue

Awesome @GBulleri ,

 

Thanks for the updates!



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


GBulleri
Participant

Embed code: how to write a validation message?

Résolue

Hi,

I fixed the preventDefault() issue; I added into onFormReady the click event:

 

onFormReady: function($form) {

var pp=$form.find('input[type=submit]');
pp.on('click', function(e) {
e.preventDefault();
return false;
});

...

...

GBulleri
Participant

Embed code: how to write a validation message?

Résolue

Hi,

 

your suggestion was precious, I did small modifications in bold:

onFormReady: function($form) {
window.addEventListener('message', event => {
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
const input =$form.find('input[name="firstname"]');// document.querySelector('input[name="firstname"]') // Change this to the property you want to validate
// Error message
const error = document.createElement('div')
error.setAttribute('class', 'form-error-message')
error.innerHTML='error';
input[0].addEventListener('input', e => {
if (e.currentTarget.value.length > 5) {
// Time to display an error
input[0].parentElement.appendChild(error)
}
})
}
});

 

the last issue I have is  where to put  preventDefault(), please look at bold comment:

 

onFormReady: function($form) {
window.addEventListener('message', event => {
event.preventDefault();  --> the form is still submitted
return false;
});

 

Thank You very much for your support

 

 

0 Votes
GBulleri
Participant

Embed code: how to write a validation message?

Résolue

Thank You very Much! Exactly what I need.

I will implement as soon as possible  your suggestion and then I will let you know how things are going

 

regards

0 Votes
Teun
Solution
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Embed code: how to write a validation message?

Résolue

Hi @GBulleri ,

You could do something like this:

window.addEventListener('message', event => {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
     const input = document.querySelector('input[name="property"]') // Change this to the property you want to validate
     // Error message
     const error = document.createElement('div')
     error.setAttribute('class', 'form-error-message')

     input.addEventListener('input', e => {
       if (e.currentTarget.value.length > 5) {
         // Time to display an error
         input.parentElement.appendChild(error)
       }
     })
  }
})

You would still need to use the 'onFormSubmit' event to prevent the form from submitting if this is unvalid.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


GBulleri
Participant

Embed code: how to write a validation message?

Résolue

Thank you... but the issue is:

suppose that theuser write 7 characters in a field and the validation rule is "do not write more than 5 characters" .I want to inform the user that he must write  max 5 characters.

Which is the jquery instruction to write the info "please write maxt 5 characters"

in the same area  of the screen where usually hubspot write his own messages? (just below the input field as show in image of my t post)

 

Thank you

 

 

 

 

0 Votes
Teun
Expert reconnu | Partenaire solutions Diamond
Expert reconnu | Partenaire solutions Diamond

Embed code: how to write a validation message?

Résolue

Hi @GBulleri ,


Are you using a custom property or a default property?
If it is the default email property then HubSpot will give an error that you can customize with some JavaScript.
If it is a custom property, you need to write your own validation code.

Please let me know!



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.