Embed code: how to write a validation message?

SOLVE
GBulleri
Participant

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 Upvotes
1 Accepted solution
Teun
Solution
Key Advisor | Diamond Partner

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.



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

View solution in original post

7 Replies 7
Teun
Key Advisor | Diamond Partner

Awesome @GBulleri ,

 

Thanks for the updates!



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

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

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 Upvotes
GBulleri
Participant

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 Upvotes
Teun
Solution
Key Advisor | Diamond Partner

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.



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

View solution in original post

GBulleri
Participant

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 Upvotes
Teun
Key Advisor | Diamond Partner

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!



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