APIs & Integrations

Not applicable

Adding Error States to Checkboxes

Hi guys

I am trying to add error states to my radio & checkbox inputs the same way as Hubspot adds to text inputs when they are invalid however I am struggling to find a way to do this.

The ideal solution would be a way to apply the ‘invalid error’ or similar classes to a radio/checkbox input that fails validation so that I could change its styles using CSS.

I have looked at all the available calls in the form API but there doesnt appear to be one for after validation has happened.

Does anybody have any ideas on how I can accomplish this?

Thanks.
Mikey

0 Upvotes
3 Replies 3
rjsnyderdesign
Member

Adding Error States to Checkboxes

One way I was able to see if checkbox is valide and add styling this was as follows:

 

$('.hs_checkbox_name').bind('DOMSubtreeModified', function () {
                                if ($('.error').length) {
                                    $(this).addClass('checkbox-container-error');
                                   
                                }
                                else {
                                    $(this).removeClass('checkbox-container-error');
                                    
                                }

                            });

 

0 Upvotes
Derek_Gervais
HubSpot Alumni
HubSpot Alumni

Adding Error States to Checkboxes

Hi @MikeyWallis,

I would recommend checking out the form markup (below) for info on the style selectors built into HubSpot forms. If you’re customizing the radio/checkbox properties required errors, you’d use the following selector:

.hs-form select:focus:required:invalid {}

If you’re trying to change styles based on some other custom arrangement of inputs, you’ll need to apply the class dynamically using JavaScript / jQuery.

0 Upvotes
jacekz
Member

Adding Error States to Checkboxes

Hello,
I guess it was never resolved. The markup generated as "raw html" does not provide any validation related class on the checkbox input. It only happens on the text input so this styling is impossible via clear CSS. Adjusting code via JS which is already being managed via React seems like a bit strange and dangerous solution.
Any luck this was resolved?

Also in the article pointed by provided link it says that for each field there is a wrapping fieldset tag, but I have a form with one text input and two checkboxes and submit and no fieldsets generated. Is it possible that something got messed up when plan was switched from free (where forms were originally created) to paid when it was changed to "raw html"?

Any help would be appreciated.
Thank you,
Jacek

0 Upvotes