如何设置表单先验证再通过EmailJs发送邮件通知？

当前表单存在先发送邮件、后执行验证的顺序问题，核心原因是表单提交时未正确关联验证逻辑与邮件发送的执行顺序，同时默认的表单提交行为可能干扰流程。以下是调整步骤和完整代码：

调整思路 #

• 阻止表单默认提交行为，避免页面刷新或默认流程打乱验证与发送顺序
• 将邮件发送逻辑sendMail嵌入表单提交的验证流程中，仅在验证通过后执行
• 修正emailjs.send的回调写法，确保邮件发送成功后再触发提示

修改后的完整代码 #

(function($) {
  "use strict";

  /*==================================================================
  [ Validate ]*/
  var name = $('.validate-input input[name="name"]');
  var email = $('.validate-input input[name="email"]');
  var subject = $('.validate-input input[name="subject"]');
  var message = $('.validate-input textarea[name="message"]');


  $('.validate-form').on('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    var check = true;

    if ($(name).val().trim() == '') {
      showValidate(name);
      check = false;
    }

    if ($(subject).val().trim() == '') {
      showValidate(subject);
      check = false;
    }


    if ($(email).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
      showValidate(email);
      check = false;
    }

    if ($(message).val().trim() == '') {
      showValidate(message);
      check = false;
    }

    // 验证通过后才执行邮件发送
    if (check) {
      sendMail();
    }
  });


  $('.validate-form .input1').each(function() {
    $(this).focus(function() {
      hideValidate(this);
    });
  });

  function showValidate(input) {
    var thisAlert = $(input).parent();
    $(thisAlert).addClass('alert-validate');
  }

  function hideValidate(input) {
    var thisAlert = $(input).parent();
    $(thisAlert).removeClass('alert-validate');
  }
})(jQuery);

function sendMail() {
  let parms = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    subject: document.getElementById("subject").value,
    message: document.getElementById("message").value,
  };
  // 修正then的回调写法，确保邮件发送成功后再弹出提示
  emailjs.send("service_iv86ftk", "template_3j5kj6n", parms)
    .then(function() {
      alert("Email Sent!!");
    })
    .catch(function(error) {
      alert("邮件发送失败: " + error.text);
    });
}

关键修改点 #

• 在表单submit事件中添加e.preventDefault()，阻止默认提交行为，避免页面跳转或自动提交干扰流程
• 验证逻辑完成后，通过if(check)判断是否执行sendMail()，确保只有验证通过才发送邮件
• 修复emailjs.send的then回调：原来的写法会直接执行alert，改为包裹在函数内，确保邮件发送成功后才触发提示，同时添加catch捕获发送失败的情况

内容的提问来源于stack exchange，提问作者Khan Ajaz