Embed code: how to write a validation message?

Developer Support APIs & Integrations
1

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

2

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!

3

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

4

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.

5

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

6

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

7

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;
});

…

…

8

Awesome @GBulleri ,

Thanks for the updates!