Remove HTML5 custom error message for reCaptcha after user passes validation

Question

I am trying to build upon this answer: https://stackoverflow.com/a/37048027

The answer worked but I wanted to put in a custom HTML5 validation error message so I expanded the javascript to this:

 window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');
    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
        $recaptcha.setAttribute("oninvalid", "this.setCustomValidity('Please fill in the reCAPTCHA field.')");
        $recaptcha.setAttribute("oninput", "this.setCustomValidity('')");
    }
};

The issue is that if the validation error is shown once, it is always shown afterwards and never goes away. I tried adding the oninput, onvalid and onchange but I can't seem to get the error message to go away after the initial showing.

Answer 1

You can disable HTML5 form validation by adding novalidate to the form element according to this specification.

For example

<form action="..." onsubmit="check_if_capcha_is_filled" novalidate>