Back to the page with the modal open

Question

Back to the page with the modal open

Navigation

#1 by (2 votes)

1

I have a question.

I have a form in a bootstrap modal where I have a recaptcha, the form's action is valid whether it was selected or not.

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

Would you like to come back with the open modal?

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

php javascript

asked by anonymous 10.08.2017 / 21:35

1 answer

Get data Multidimensional array (codeigniter)? Change color of a row in the datatable when marking a checkbox

score 2 · Accepted Answer

You should not use modal and JavaScript alerts . It's a terrible experience.

What you can do is to certainly use reCaptcha's callback functions.

In this example, when submitting the form I check whether the user has tagged 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 tailor this response to your case.

The full 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

CSS Bootstrap 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