APIs & Integrations

GBulleri
参加者

Embed code: how to write a validation message?

解決

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 いいね!
1件の承認済みベストアンサー
Teun
解決策
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

Embed code: how to write a validation message?

解決

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.


元の投稿で解決策を見る

7件の返信
Teun
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

Embed code: how to write a validation message?

解決

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
参加者

Embed code: how to write a validation message?

解決

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
参加者

Embed code: how to write a validation message?

解決

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 いいね!
GBulleri
参加者

Embed code: how to write a validation message?

解決

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 いいね!
Teun
解決策
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

Embed code: how to write a validation message?

解決

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
参加者

Embed code: how to write a validation message?

解決

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 いいね!
Teun
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

Embed code: how to write a validation message?

解決

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.