1

estou com uma duvida.

Tenho um formulário em um modal do bootstrap onde tenho um recaptcha, o action do formulario valida se foi selecionado ou não.

Dou um alerta e ele volta para a pagina anterior, porem o modal esta fechado.

Teria como voltar com o modal aberto?

Segue o código da verificação

if (!$captcha_data) {
echo "<script> alert('Confirme o reCaptcha!');   window.history.go(-1); </script>"; 
}else{
    enviar();
    salvar();
    echo "<script>window.location='index.php'; </script>";  
}
3
  • tenta usar ancoras do html
    – 13dev
    Commented 10/08/2017 às 19:35
  • O caminho do window.history.go(-1); sempre será o mesmo? Commented 10/08/2017 às 21:41
  • Sim @BrunoFolle sempre.
    – annyk
    Commented 11/08/2017 às 19:25

1 Resposta 1

2

Você não deveria usar modal e JavaScript alerts. É uma péssima experiência.

O que você pode fazer é certamente usar as funções de callback do reCaptcha.

Nesse exemplo, ao submeter o formulário eu verifico se o usuário marcou ou não o reCaptcha v2 com o seguinte:

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

Agora eu simplesmente preciso verificar se a API do reCaptcha vai retornar um valor vazio em response acima, se sim, o usuário não marcou o formulário:

// 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!");
    }
});

Esse é o único JS que eu preciso para validar o reCaptcha, no entanto, você vai querer adaptar esta resposta ao seu caso.

O exemplo completo pode ser visto neste JSFiddle.

Segue o restante do código abaixo:

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;  
}

Arquivos externos

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

1
  • Nossa muito obrigada.
    – annyk
    Commented 11/08/2017 às 19:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .