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?
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.
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"?