estoy teniendo un problema con un formulario de contacto que tengo en un sitio hecho en laravel,por problemas de span debo implementar reCaptcha en el form, para lo cual en el controlador uso el metodo "validate" PARA VALIDAR los campos del form incluido el recaptcha, el problema es que por mas que resuelva el captcha correctamente el mensaje no se envia y me muestra el error: validation.recaptcha.
Destaco que en la consola no hay error alguno al momento de enviar el form
public function enviarFormContacto(Request $request){
$validator = validator::make($request->all(), [
'nombre' => 'required|min:5|max:35',
'fono' => 'required|max:11',
'email' => 'required',
'mensaje' => 'required',
'g-recaptcha-response' => 'recaptcha',
]);
if ($validator->fails()) {
return response()->json([
'errors' => $validator->errors()->all()
]);
}
// your article save codes here..
$correo = new ContactoMail($validator->all());
Mail::to('[email protected]')->send($correo);
return "enviado";
}
El codigo del form lo tengo asi:
<form id="form" {{-- action="{{ route('contacto.send') }}" method="POST" --}} class="p-5 formulario-contacto-principal">
@csrf
<div class="row mb-4">
<div class="col-lg-6 form-sm"> <i class="fa fa-user prefix"></i><label for="nombre">Mi nombre es:</label>
<input type="text" id="nombre" name="nombre" class="form-control @error('nombre') is-invalid @enderror " placeholder="Su Nombre y Apellido">
@error('nombre')
<small class="text text-danger"><strong>*{{$error}}</strong></small>
@enderror
</div>
<div class="col-lg-6 form-sm"> <i class="fa fa-phone prefix"></i><label for="fono">Llámeme al:</label>
<input type="tel" name="fono" class="form-control form-control-sm" placeholder="Ej: +569 11223344" >
</div>
</div>
<div class="row mb-4">
<div class="col-lg-6 form-sm"> <i class="fa fa-envelope prefix"></i><label for="email">y escríbame a:</label>
<input type="email" name="email" placeholder="[email protected]" class="form-control form-control-sm" >
</div>
<div class="col-lg-6 form-sm"> <i class="fa fa-info-circle prefix"></i><label for="condicion">Me identifico como:</label>
<select name="condicion" id="condicion" class="form-control form-control-sm">
<option value="Particular">Particular</option>
<option value="Emprendedor" selected>Emprendedor</option>
<option value="Pyme">Pyme</option>
<option value="Empresa">Empresa</option>
</select>
</div>
</div>
<div class="row mb-4">
<div class="col-lg-12 form-sm"> <i class="fa fa-comments"></i><label for="mensaje">Mi mensaje:</label>
<textarea type="text" name="mensaje" class="md-textarea form-control form-control-sm" rows="6" placeholder="Gracias por contactarnos!"></textarea>
</div>
</div>
<div class="row mb-4">
<div class="col-lg-12 form-sm" class="form-control @error('recaptcha') is-invalid @enderror"> <i class="fa fa-comments"></i><label for="recaptcha">Verificación Humana:</label>
{!! htmlFormSnippet() !!}
</div>
</div>
<div class="row mb4">
<div class="text-center mt-4">
<button type="submit" id="submit" class="btn btn-success">ENVIAR CONSULTA<i class="fa fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</form>
y en la vista, mediante ajax proceso el envio del formulario:
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val();
var nombre = $("input[name='nombre']").val();
var condicion = $("input[name='condicion']").val();
var fono = $("input[name='fono']").val();
var email = $("input[name='email']").val();
var mensaje = $("textarea[name='mensaje']").val();
$.ajax({
url: "{{ route('contacto.send') }}",
method: 'POST',
dataType:'json',
data: {
'_token' : _token,
'nombre': nombre,
'fono': fono,
'email': email,
'condicion': condicion,
'mensaje':mensaje,
'response': grecaptcha.getResponse()
},
success: function(data) {
if(!$.isEmptyObject(data.error)) {
alert('Post created successfully.');
} else {
$('.alert-danger').empty();
$.each(data.errors, function(key, value) {
$('.alert-danger').show();
$('.alert-danger').append('<p>'+value+'</p>');
});
}
}
});
});
});
</script>