El usuario rellena un formulario nombre, emaily mensaje y se envía por correo electrónico. Al enviarlo se visualiza el div con id="correcto" el cual muestra un mensaje de confirmación. Para verificar que es humano utilizo invisible recaptchade Google.
Los 3 campos son obligatorios. Para ello utilizo bootstrapValidator en main.js
El problema es que cuando pulso el botón enviar directamente salta la verificación del captcha y no se verifica que el los 3 campos del formulario este llenos, con lo cual, se pueden enviar vacío
Parte del código index.php
<?php
require_once "recaptcha/src/autoload.php";
$secret = 'MY_SECRET_KEY';
if (isset($_POST["name"]) && $_POST["email"] && $_POST["mensaje"]) {
$gRecaptchaResponse = isset($_POST["g-recaptcha-response"])? $_POST["g-recaptcha-response"] : null;
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->verify($gRecaptchaResponse, $_SERVER['REMOTE_ADDR']);
/*
if ($resp->isSuccess()) {
die("El mensaje se ha enviado!");
} else {
die("beep bop!");
}*/
}
?>
<head>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function onSubmit(token) {
document.getElementById("soporteForm").submit();
$('#correcto').fadeIn();
}
</script>
</head>
<body>
<form class="form-horizontal" id="soporteForm" method="post" action="ajaxSubmit.php" target="request">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control campos" placeholder="Izena" name="nombre" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control campos" placeholder="Posta elektronikoa" name="email" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control campos" placeholder="Mezua" name="mensaje" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default g-recaptcha" data-sitekey="MY_SECRET_KEY" data-callback="onSubmit">Enviar</button>
<!--<input type="submit" class="btn btn-default g-recaptcha" data-sitekey="6Lc_bCEUAAAAAMzQcR1LYVl7593PKGPMdRPa0-D6" data-callback="onSubmit" value="Bidali"/>-->
</div>
</div>
<iframe name="request" style="display:none">
</iframe>
<div id="correcto">
El mensaje ha sido enviado correctamente
</div>
</form>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>ficheromain.js
$('#soporteForm').bootstrapValidator({
message:"Esto no es válido",
feedbackIcons:{
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
fields:{
nombre:{
validators:{
notEmpty:{
message: "Atal hau betebeharrekoa da"
},
}
},
email:{
validators:{
notEmpty:{
message: "Atal hau betebeharrekoa da"
},
emailAddress:{
message: "Honek ez dirudi posta elektroniko bat"
}
}
},
mensaje:{
validators:{
notEmpty:{
message: "Mezua ezin du hutsik egon"
}
}
}
}
}).on('success.form.bv', function(e){
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.post($form.attr('action'), $form.serialize(), function(result){
$('#correcto').fadeIn();
console.log(result);
}, 'json');
});
});Y este es el fichero ajaxSubmit.phpque envia el mail mediante php
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
$header = 'From: [email protected]' . "\r\n";
$header .= "X-Mailer:PHP/" . phpversion() . "\r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";
$comentario = "Mezua bidalitako pertsona: " . $nombre . "\r\n";
$comentario .= "Bere posta elektronikoa: " . $email . "\r\n";
$comentario .= "Mezua: " . $mensaje . "\r\n";
$para = "[email protected]";
$asunto = "Lezo Landing Page-eko kontatua";
mail($para, $asunto, utf8_decode($comentario), $header);
// respuesta al servidor
$nombre = $_POST['nombre'];
echo json_encode(array(
'Mensaje' => sprintf('Se recibió el correo de %s', $nombre)
));