Shopify Contact Form Custom Validation Messages

I would like to add custom validation messages to Contact form. For example instead of default "Please fill out this field", I want to put "Please enter first name", "Please enter last name", "Email address is invalid". I added js on event "on('submit', function(event)" to validate the fields and use my validation messages and it works. However, the problem seems that with the new Shopify hCaptcha it still submits the form instantaneously upon submit. Meaning, the on('submit') gets triggered and my custom validation messages appear, but the form is submitted immediately; it doesn't stay on the page to show the validation messages. We don't want to disable hCaptcha. I tried adding " event.preventDefault()" but it still calls hCaptcha and the page forwards upon clicking Submit. It seems the hCaptcha code is overriding something that doesn't allow "preventDefault()" from firing. Any suggestions would be much appreciated.

Comment (0)

You’ll be in good company