Back to page with the modal open

Question

I have a question.

I have a form in a bootstrap modal where I have a recaptcha, the form action validates whether it was selected or not.

I give an alert and it goes back to the previous page, but the modal is closed.

It would be possible to return with the modal open?

Follow the verification code

if (!$captcha_data) {
echo "<script> alert('Confirme o reCaptcha!');   window.history.go(-1); </script>"; 
}else{
    enviar();
    salvar();
    echo "<script>window.location='index.php'; </script>";  
}

Answer 1

You shouldn’t wear it modal and Javascript Alerts. It’s a bad experience.

What you can do is certainly use the functions of callback reCaptcha.

In this example, when submitting the form I check whether or not the user has checked reCaptcha v2 with the following:

$("#g-recaptcha-response").val()

Now I simply need to check if the reCaptcha API will return an empty value in response above, if yes, the user did not mark the form:

// Valida o envio do formulário
$( "#form-login" ).submit( function (event) {

    var recaptcha = $("#g-recaptcha-response").val();

    if ( recaptcha === "" ) {
        event.preventDefault();
        $( ".recaptcha-error" ).html("Racaptcha inválido!");
    }
});

This is the only JS I need to validate reCaptcha, however, you will want to adapt this response to your case.

The complete example can be seen in this Jsfiddle.

Follow the rest of the code below:

HTML

<button id="lancar-modal" type="button" class="btn btn-success btn-md" data-toggle="modal" data-target="#myModal">
Lançar modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <!-- Conteúdo do modal -->
        <div class="modal-content">
            <!-- Inicio do form, que vai encapsular todo o conteúdo do modal - header, body e footer -->
            <form name="login" method="post" id="form-login"  action="?">
                <!-- Cabeçalho do modal -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Login</h4>
                </div>
                <!-- Corpo do modal -->
                <div class="modal-body">
                    <div class="row">
                        <!-- Formulario input de email -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="Email">Email</label>
                                <input id="email" type="email" name="email" class="form-control" placeholder="Digite seu email" required="required">
                            </div>
                        </div>
                        <!-- Formulário da senha -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="Senha">Senha</label>
                                <input id="senha" type="password" name="senha" class="form-control" placeholder="Digite sua senha">
                            </div>
                        </div>
                        <!-- Recaptcha e a div que vai mostrar o erro caso o form seja submetido sem o recaptcha ser marcado -->
                        <div class="col-md-12">
                            <div class="g-recaptcha" data-sitekey="6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG"></div>
                            <div class="recaptcha-error"></div>
                        </div>
                    </div>  
                    <!-- Botões de cancelar e submeter o formulário no rodapé do modal -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary" name="log-in">Log In</button>             
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

CSS

button {
    margin-top: 20px;
    margin-left: 15px;
}

#lancar-modal {
    border-radius: 0px;
    background-color: green;
}

.recaptcha-error {
    color: red;  
}

External files

Bootstrap CSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Google Fonts CSS https://fonts.googleapis.com/css?family=Lato:300,400,700

Jquery JS https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js

Bootstrap JS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

API reCaptcha JS https://www.google.com/recaptcha/api.js