# Custom validation & prevent form submision

**URL:** <https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [November 21, 2023, 4:23pm UTC](https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498 "2023-11-21T16:23:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![CVlad](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cvlad/32/105005_2.png) [@CVlad](https://community.hubspot.com/u/CVlad)\
**Post date:** [November 21, 2023, 4:23pm UTC](https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498/1 "2023-11-21T16:23:05Z")

</div>

Hello all,  
Just found a solution for doing a basic validation on fields before submit on a hubspot form.  
Conditions:  
Raw html form  
Include jquery

Code

```lia-code-sample
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "...",
 portalId: "123123",
 formId: "xxxxxxx", 
 onFormReady: function () {
 // Use a more specific selector if possible
 var formSelector = '#hsForm_xxxxxx'; // Replace with your form's specific class or ID
 var form = document.querySelector(formSelector);

 if (form) {
 var firstnameField = form.querySelector('[name="firstname"]');
 var submitButton = form.querySelector('input[type="submit"], button[type="submit"]');

 if (firstnameField && submitButton) {
 // Initially disable the submit button
 submitButton.disabled = true;

 firstnameField.addEventListener('input', function() {
 var value = firstnameField.value;
 if (isValid(value)) {
 clearError();
 submitButton.disabled = false;
 } else {
 showError('The field format is invalid. It should be 2 letters followed by 8 numbers.');
 submitButton.disabled = true;
 }
 });
 } else {
 console.error('Form elements not found');
 }
 } else {
 console.error('Form not found');
 }

 function isValid(value) {
 var regex = /^[A-Za-z]{2}\d{8}$/; // This matches XX12345678
 return regex.test(value);
 }

 function showError(message) {
 console.error(message); // Placeholder implementation
 // Add UI logic here to display the message
 }

 function clearError() {
 // Add UI logic here to clear the displayed error message
 }
 }
 });
</script>

```

This code will disable the submit button until the field matches the regex.  
You can add as many form validations you like and also add error message until the fields matches the regex.  
Hope this helps.

---

<div class="post-metadata">

**Author:** ![MiaSrebrnjak](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miasrebrnjak/32/10_2.png) [@MiaSrebrnjak](https://community.hubspot.com/u/MiaSrebrnjak)\
**Post date:** [November 22, 2023, 11:28am UTC](https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498/2 "2023-11-22T11:28:09Z")

</div>

Hi @CVlad,

Thank you so much for sharing! 💛

I’ve highlighted your post so it’s included under “Top Community Conversations”[on our homepage](https://community.hubspot.com/). 🙂

Cheers  
Mia, Community Team

---

<div class="post-metadata">

**Author:** ![matt\_scott](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt_scott/32/36038_2.png) [@matt\_scott](https://community.hubspot.com/u/matt_scott)\
**Post date:** [November 24, 2023, 10:23am UTC](https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498/3 "2023-11-24T10:23:19Z")

</div>

Thanks this looks great  
Previously I’ve set the validation on the click event on the button in the onFormReady  
Although it’s a ‘click’ event apparently the click is triggered when someone hits enter too  
e.g. in quick jQuery

```lia-code-sample
$(submitButton).on('click',function(e){
 if(do some custom validation) {
 e.preventDefault();
 }
}

```

That code needs to be in the onFormReady and you obviously need to use the correct selectors

---

<div class="post-metadata">

**Author:** ![SteveHTM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stevehtm/32/22074_2.png) [@SteveHTM](https://community.hubspot.com/u/SteveHTM)\
**Post date:** [December 4, 2023, 3:01pm UTC](https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498/4 "2023-12-04T15:01:44Z")

</div>

There are some great ideas on form functionality extensions here and elsewhere in the community. I’ve found this incredibly helpful, but its sometime hard to hunt for.

Is there any chance that someone could formally update the foundationn document for form extensions at [https://legacydocs.hubspot.com/docs/methods/forms/advanced\_form\_options](https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options) with some of the more complete and innovative functionality thats been discussed here?

Steve

---

<div class="post-metadata">

**Author:** ![DavidClark08](https://avatars.discourse-cdn.com/v4/letter/d/94ad74/32.png) [@DavidClark08](https://community.hubspot.com/u/DavidClark08)\
**Post date:** [May 8, 2024, 4:27am UTC](https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498/5 "2024-05-08T04:27:32Z")

</div>

Thank you so much for sharing!

I’ve seen your post so it’s included under "Top Community Conversations"[on](https://arkansascourtconnect.us/)[homepage](https://community.hubspot.com/)

.

---

<div class="post-metadata">

**Author:** ![kgeddon](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kgeddon/32/85304_2.png) [@kgeddon](https://community.hubspot.com/u/kgeddon)\
**Post date:** [January 24, 2025, 8:46am UTC](https://community.hubspot.com/t/custom-validation-prevent-form-submision/94498/6 "2025-01-24T08:46:19Z")

</div>

Custom validation is a great way to ensure data integrity before a form submission. I have implemented custom validation in JavaScript to check for specific conditions like input length or format, and prevent submission if they are not met. It is always important to give clear error messages to guide the user. Anyone else have tips for handling more complex validation scenarios?