# Embed code: how to write a validation message?

**URL:** <https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014>\
**Category:** APIs & Integrations\
**Tags:** professional\
**Created:** [December 5, 2021, 12:55pm UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014 "2021-12-05T12:55:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![GBulleri](https://avatars.discourse-cdn.com/v4/letter/g/898d66/32.png) [@GBulleri](https://community.hubspot.com/u/GBulleri)\
**Post date:** [December 5, 2021, 12:55pm UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/1 "2021-12-05T12:55:47Z")

</div>

Hi,

I’ am working with the embed code.

The Hubspot documentation says to wrire custom code inside onFormSubmit

```auto
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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/4/e435548de2593ee4545ec13d2ce2b767da2662ea.png)

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [December 6, 2021, 7:29am UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/2 "2021-12-06T07:29:46Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![GBulleri](https://avatars.discourse-cdn.com/v4/letter/g/898d66/32.png) [@GBulleri](https://community.hubspot.com/u/GBulleri)\
**Post date:** [December 6, 2021, 8:27am UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/3 "2021-12-06T08:27:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [December 6, 2021, 8:55am UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/4 "2021-12-06T08:55:35Z")

</div>

Hi @GBulleri ,  
You could do something like this:

```lia-code-sample
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.

---

<div class="post-metadata">

**Author:** ![GBulleri](https://avatars.discourse-cdn.com/v4/letter/g/898d66/32.png) [@GBulleri](https://community.hubspot.com/u/GBulleri)\
**Post date:** [December 6, 2021, 5:45pm UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/5 "2021-12-06T17:45:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GBulleri](https://avatars.discourse-cdn.com/v4/letter/g/898d66/32.png) [@GBulleri](https://community.hubspot.com/u/GBulleri)\
**Post date:** [December 6, 2021, 7:21pm UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/6 "2021-12-06T19:21:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GBulleri](https://avatars.discourse-cdn.com/v4/letter/g/898d66/32.png) [@GBulleri](https://community.hubspot.com/u/GBulleri)\
**Post date:** [December 6, 2021, 8:24pm UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/7 "2021-12-06T20:24:52Z")

</div>

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

…

…

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [December 7, 2021, 6:22pm UTC](https://community.hubspot.com/t/embed-code-how-to-write-a-validation-message/48014/8 "2021-12-07T18:22:39Z")

</div>

Awesome @GBulleri ,

Thanks for the updates!