Bootstrap 4验证验证码 [英] Bootstrap 4 Validation reCaptcha
问题描述
由于Bootstrap 4具有自己的表单验证功能,因此我想向其中添加 Google Invisible reCaptcha .但是,如何在javascript中激活 grecaptcha.execute(); 使其起作用?它应该在Bootstrap验证成功之后而不是之前执行reCaptcha.
Since Bootstrap 4 has their own form validation i like to add the Google Invisible reCaptcha to it. But how can i activate grecaptcha.execute(); in the javascript to make it work? It should execute the reCaptcha after Bootstrap Validation was successfull and not before.
这是我的代码:
<?php
if($_SERVER["REQUEST_METHOD"] === "POST") {
// Google reCaptcha
$ip = $_SERVER['REMOTE_ADDR'];
$api_response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$ip);
$api_response = json_decode($api_response, true);
if($api_response["success"] === true) {
echo "Success";
} else {
print_r($api_response);
}
}
?>
<div class="container py-6">
<form class="needs-validation" novalidate action="" method="POST">
<div class="form-group">
<label for="City">City</label>
<input type="text" class="form-control" id="City" required>
<div class="invalid-feedback">Please provide a valid city.</div>
</div>
<div id="recaptcha" class="g-recaptcha" data-sitekey="WhateverSiteKey" data-callback="onSubmit" data-size="invisible"></div>
<button class="btn btn-dark">Send</button>
</form>
</div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
推荐答案
我在很多方面寻找了与引导程序默认验证代码兼容的前端解决方案,没有发现任何东西,而是编写了自己的解决方案.
I searched a lot for fronted solution compatible with bootstrap default validation code, didn't found anything and wrote my own.
这很简单,也不理想-但这可以解决我的需求.
That's very straightforward and not ideal - but it works and solves my needs.
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
// CAPTCHA VALIDATION
// var response = grecaptcha.getResponse();
// if(response.length == 0){
// document.querySelector('.g-recaptcha>div').classList.add('border', 'border-danger')
// event.preventDefault();
// event.stopPropagation();
// }
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
这篇关于Bootstrap 4验证验证码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!