Problem with captcha

See more:

HTML

security

So i found a bug on web page i'm working, the ReCaptchav2 doesn't have to be completed (authorize or finished) to send a form. I'm using joomla, but the form is created using html, is this causing a problem with the Google API? What are the solutions to this problem.

When i fill the required spaces, even if it is a space, and then submit it shows the alert that says that its required, but it makes the post anyway.

<form action="http://eper.com.mx/contacto.php" method="post">

    <script type="text/javascript">
        var onloadCallback = function () {
            grecaptcha.render('html_element', {
                'sitekey': '6LdfnVkUAAAAACGD86TxzFLChMXof1K1CyO621g5'
            });
        };
    </script>

    <fieldset>
        <span style="color:white; font-family:Arial; font-size:30px;">Contáctanos</span><br><br>
        <div class="form-group">
            <input id="nombre" class="form-control" name="nombre" required="" type="text" placeholder="Nombre" style="-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 350px;" />
        </div>
        <div class="form-group">
            <input id="apellidos" class="form-control" name="apellidos" required="" type="text" placeholder="Apellidos" style="-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 350px;" />
        </div>
        <div class="form-group">
            <input id="email" class="form-control" name="email" required="" type="text" placeholder="Correo Electrónico" style="-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 350px;" />
        </div>
        <div class="form-group">
            <input id="telefono" class="form-control" name="telefono" required="" type="text" placeholder="Teléfono" style="-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 350px;" />
        </div>
        <div class="form-group">
            <textarea id="mensaje" name="mensaje" required="" placeholder="Escríbenos un mensaje" style="-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 350px;"></textarea>
        </div>
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <div id="html_element"></div>
        <p></p>
        <button class="btn btn-info" type="submit"
            style="-webkit-border-radius: 8px; -mozborder-radius: 8px; border-radius: 8px; width: 100px;">Enviar</button>
    </fieldset>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</form>

What I have tried:

Using the jommla reCatpcha plugin, Changing the code using the code that google API docs provide. I have looked plugins for joomla, but i disable the form