How to prevent form submission in onFormReady section?


#1

I’m trying to prevent the user from submitting the form unless a field is marked. Although HubSpot allows for required fields in this case I’m passing to HubSpot the field, which is a selected image, so the field needs to be hidden to the user. Since it needs to be required I’m trying to do onFormReady to check for marked status. The question is then how do I prevent the form submission IF not selected?

I’m able to identify that nothing is selected but not prevent the submit. Any thoughts? I currently have the following:
onFormReady: function($form) {
if (!$(’.img-container1’).hasClass(‘active’)) {
$(’.img-mid’).append(“

This is a required field

”);
} else {
$(‘input[name=“image”]’, $form).val(Image);
}
}

In the above img-container1 is the class that can be marked for active. img-mid is the div that would get the append if it’s not marked.


#2

Hi @jakedub,

You might find this medium post helpful:


#3

Hi @jakedub,
are you sure that's this work around still work?
I'm very unhappy that's there isn't a callback for prevent submission related to additional business logic and also that's not a more effective way for highlight a specified error for mobile device where the lenght of the form can hide where is the error and give in this way a very poor User eXperience. In the user don't see (it's not in the portion of the visibile area) any error the form is not submitted and seem that doesn't work at all.


#4

Hi @enrico.bianchetti,

The link I posted above is a workaround from a 3rd party, so I can't speak to whether or not it's fully functional. There isn't any built-in callbacks to prevent submission of HubSpot embedded forms. If you need to implement some custom validation, you'd be better off building a custom HTML form and using the forms API: