topic Re: Embed code: how to write a validation message? in APIs & Integrations

Embed code: how to write a validation message?

GBulleri — Sun, 05 Dec 2021 12:55:47 GMT

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"

Re: Embed code: how to write a validation message?

Teun — Mon, 06 Dec 2021 07:29:46 GMT

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!

Re: Embed code: how to write a validation message?

GBulleri — Mon, 06 Dec 2021 08:27:28 GMT

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

Re: Embed code: how to write a validation message?

Teun — Mon, 06 Dec 2021 08:55:35 GMT

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.

Re: Embed code: how to write a validation message?

GBulleri — Mon, 06 Dec 2021 17:45:27 GMT

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

Re: Embed code: how to write a validation message?

GBulleri — Mon, 06 Dec 2021 19:21:49 GMT

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

Re: Embed code: how to write a validation message?

GBulleri — Mon, 06 Dec 2021 20:24:52 GMT

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

...

Re: Embed code: how to write a validation message?

Teun — Tue, 07 Dec 2021 18:22:39 GMT

Awesome @GBulleri ,

Thanks for the updates!