I am writing a php page with a working form where I want add invisible recaptcha. The form is this:
<form action="#" id="contact-form">
<div class="input-group name-email input-field">
<input type="text" name="name" id="name" placeholder="Name" class="form-control">
</div>
<!-- RECAPTCHA div-->
<div class="g-recaptcha" data-sitekey=[key] data-callback="onSubmit" data-size="invisible">
</div>
<input type="button" id="form-submit" class="pull-right" value="Send">
<form>
To Validate the form I use this:
<script type="text/javascript">
$(function(){
alert("Just Before Contact Form Validate");
$('#contact-form').validate({
rules: {
name: {
required: true,
minlength: 2
}
},
messages: {
name: {
required: "What's your name?",
minlength: "Name min.2 chars"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:[Another PHP page],
success: {[do this]
},
error: {[do that]
}etc etc
I put the alert for debugging reason; when I load the page I receive it. After the form I included two external js files for validation:
<!-- Contact form validation -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
To handle recaptcha, after the form and before the javascript form with the alert I added
<script>
function onSubmit(token) {
alert("Inside OnSubmit");
var element=document.getElementById('contact-form');
element.submit();
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
$(function() {
$("#form-submit").on('click',function() {
grecaptcha.execute();
alert('g-recaptcha executed');
return false;
});
});
</script>
I put these alerts too for debugging reasons. When I load the page I get the first alert; no errors reported in the console part. I press "Snd", even without filling the fields, and I get the "g-recaptcha executed" and "inside on Submit", then the page reloads without validating the inputs. I would expect it to stop and display the errors, but it goes on and now my browser is not anymore in myPage.php but in myPage.php?name=&g-recaptcha-response=[long string]. Still, no error displayed in console. How can I fix it? Can anybody help me please? Thank you.
