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