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">×</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