Dec 5, 2021 7:55 AM
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"
Solved! Go to Solution.
Dec 6, 2021 3:55 AM
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.
Dec 7, 2021 1:22 PM
Dec 6, 2021 3:24 PM
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;
});
...
...
Dec 6, 2021 2:21 PM
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
Dec 6, 2021 12:45 PM
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
Dec 6, 2021 3:55 AM
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.
Dec 6, 2021 3:27 AM
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
Dec 6, 2021 2:29 AM
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!