Embed code: how to write a validation message?

[GBulleri]

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"

[Teun]

Awesome @GBulleri ,

Thanks for the updates!

[GBulleri]

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]

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

[GBulleri]

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

[Teun · Accepted solution]

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.

[GBulleri]

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

[Teun]

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!