Bom dia pessoal.
Fui ajustando um script para enviar e-mails com Ajax e Php.
Está funcionando muito bem o envio e uma coleta de informações que faço após o envio.
Para ficar 99% certo, falta um detalhe no Validate, que uso no formulário de contato.
Parece que ele funciona em conjunto com o script de envio e não após fazer a validação.
Se eu usar " submitHandler " (como no exemplo da documentação)
$("#myform").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
$(form).submit();
}
});
Parece que o formulário dá problema no focus, para de clicar, sei lá.
Vou colocar o que fiz aqui.
Se alguém tiver alguma sugestão desse detalhe, eu agradeço.
<!-- Formulário de contato -->
<form name="form_contato" id="form_contato" method="post" action="">
<div class="row">
<div class="col-md-12">
<div class="form-field">
<input type="text" placeholder="Nome" id="nome" name="nome">
</div>
</div>
<div class="col-md-12">
<div class="form-field">
<input type="tel" placeholder="Telefone" id="telefone" name="telefone">
</div>
</div>
<div class="col-md-12">
<div class="form-field">
<input type="email" placeholder="E-mail" id="email" name="email">
</div>
</div>
<div class="col-md-12">
<div class="form-field">
<input type="text" placeholder="Assunto" id="assunto" name="assunto">
</div>
</div>
</div>
<div class="form-field">
<textarea placeholder="Mensagem" rows="4" id="mensagem" name="mensagem"></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-button text-left">
<div class="form-tip">
<div class="g-recaptcha" data-sitekey="<?php echo $chave_de_site_sel; ?>"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-button text-right text-center-mobile">
<button type="submit" class="readon">Enviar</button>
<input type="hidden" name="enviar" value="ok" />
</div>
</div>
</div>
<div class="text-center" id="post_email" style="display: none; ">
<div class="alert alert-warning mt-30" role='alert'>Aguarde, enviando o e-mail...</div>
</div>
</form>
/****** Validate ******/
$().ready(function() {
$("#form_contato").validate({
rules: {
nome: "required",
email: {required: true, email: true},
telefone: "required",
assunto: "required",
mensagem: "required",
},
messages: {
nome: "Informe seu nome",
email: {required: "Informe o e-mail", email: "Informe um e-mail válido"},
telefone: "Informe o telefone",
assunto: "Informe o assunto",
mensagem: "Envie uma mensagem"
}
});
});
/****** Validate ******/
/****** Ajax ******/
$('#form_contato').on('submit', function (e) {
e.preventDefault();
const nome = $('input[name="nome"]').val();
const telefone = $('input[name="telefone"]').val();
const email = $('input[name="email"]').val();
const assunto = $('input[name="assunto"]').val();
const mensagem = $('textarea[name="mensagem"]').val();
const g_recaptcha_response = $('#g-recaptcha-response').val();
$('#post_email').css({ 'display': "block" } );
$.ajax({
type: 'post',
url: '<?php echo $dir_base; ?>php/post/contato.php',
data: {nome: nome, telefone: telefone, email: email, assunto: assunto, mensagem: mensagem, g_recaptcha_response: g_recaptcha_response},
success: function(response) {
var data = $.parseJSON(response);
if (data.status == 10) {
swal({
title: "Enviado",
text: "Agradecemos seu contato!",
confirmButtonColor: "#007ca8",
type: "success"
});
$("#form_contato")[0].reset();
grecaptcha.reset();
$('#post_email').css({ 'display': "none" } );
}else if (data.status == 20) {
swal({
title: "Oopss...",
text: "Ocorreu um problema ao concluir o envio do e-mail",
confirmButtonColor: "#e74c3c",
type: "error"
});
grecaptcha.reset();
$('#post_email').css({ 'display': "none" } );
}else if (data.status == 30) {
swal({
title: "Oopss...",
text: "O reCAPTCHA não foi habilitado",
confirmButtonColor: "#e74c3c",
type: "error"
});
grecaptcha.reset();
$('#post_email').css({ 'display': "none" } );
}else if (data.status == 40) {
swal({
title: "Oopss...",
text: "Ocorreu um problema ao acessar o banco de dados",
confirmButtonColor: "#e74c3c",
type: "error"
});
grecaptcha.reset();
$('#post_email').css({ 'display': "none" } );
}else {
swal({
title: "Oopss...",
text: "Ocorreu um erro ao enviar a mensagem",
confirmButtonColor: "#e74c3c",
type: "error"
});
grecaptcha.reset();
$('#post_email').css({ 'display': "none" } );
}
}
});
});
/****** Ajax ******/
O post do PHP é meio grande, se for necessário eu coloco ele também.
Muito obrigado
