Quando preencho todos os dados o formulário envia normalmente, porém quando envio ele vazio ele envia também, eu notei que ele não verifica se os campos estão vazios quando o atributo data-button está no botão, porém quando tiro ele meu formulário para de funcionar.
HTML
<!--begin col-md-6 -->
<div class="col-md-6 center-mobile">
<h4>Entre em contato conosco!</h4>
<!--begin success message -->
<p class="contact_success_box" style="display:none;">Sua mensagem foi recebida com sucesso! Em breve entraremos em contato!</p>
<!--end success message -->
<!--begin contact form -->
<form action="https://formsubmit.co/ajax/brunouasli@gmail.com" method="POST" data-form>
<input class="contact-input white-input" required maxlength="45" name="nome" placeholder="Nome:*" type="text">
<input class="contact-input white-input" required="" name="email" placeholder="E-mail*" type="email">
<input class="contact-input white-input" required="" name="telefone" placeholder="Telefone:*" type="text">
<textarea class="contact-commnent white-input" rows="2" cols="20" name="mensagem" placeholder="Sua mensagem..."></textarea>
<button type="submit" class="contact-submit" data-button>Enviar mensagem</button>
</form>
<!--end contact form -->
</div>
<!--end col-md-6 -->
Javascript
class FormSubmit {
constructor(settings) {
this.settings = settings;
this.form = document.querySelector(settings.form);
this.formButton = document.querySelector(settings.button);
if (this.form) {
this.url = this.form.getAttribute("action");
}
this.sendForm = this.sendForm.bind(this);
}
displaySuccess() {
this.form.innerHTML = this.settings.success;
}
displayError() {
this.form.innerHTML = this.settings.error;
}
getFormObject() {
const formObject = {};
const fields = this.form.querySelectorAll("[name]");
fields.forEach((field) => {
formObject[field.getAttribute("name")] = field.value;
});
return formObject;
}
onSubmission(event) {
event.preventDefault();
event.target.disabled = true;
event.target.innerText = "Enviando...";
}
async sendForm(event) {
try {
this.onSubmission(event);
await fetch(this.url, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify(this.getFormObject()),
});
this.displaySuccess();
} catch (error) {
this.displayError();
throw new Error(error);
}
}
init() {
if (this.form) this.formButton.addEventListener("click", this.sendForm);
return this;
}
}
const formSubmit = new FormSubmit({
form: "[data-form]",
button: "[data-button]",
success: "<h1 class='success'>Mensagem enviada!</h1>",
error: "<h1 class='error'>Não foi possível enviar sua mensagem.</h1>",
});
formSubmit.init();
FormData
é uma forma de resolver isso.