如何阻止EmailJS提交包含空白字段的HTML表单？

我创建了带required属性的日期输入表单，但通过按钮的onclick调用sendMail()时，即使日期为空也会提交表单。尝试自定义校验函数check()但无效。

原始表单代码 #

<form>
    <div class="form-item">
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" required>
    </div>
    <button type="submit" onclick="sendMail()">Submit</button>
</form>

原始JavaScript代码 #

function sendMail(){
    var params = {
        date: document.getElementById("date").value
    };

    const serviceID = "my_id";
    const templateID = "my_id";

    emailjs.send(serviceID, templateID, params).then((res) => {
        document.getElementById("date").value = ""; 
        console.log(res);
        alert("Done! Our Team will get back to you soon");
    })
    .catch((err) => console.log(err));
    
}

无效的校验函数 #

function check() {
  var date = document.getElementById("date").value;
  if (!date) {
    alert("Please fill in all fields");
    return;
  }else {
    sendMail();
  }
}

问题根源 #

1. 按钮为type="submit"，点击时会触发表单默认提交行为，onclick函数执行后，默认提交逻辑仍会运行，导致空表单也能提交。
2. 自定义校验函数未绑定正确的事件逻辑，也没有阻止表单的默认提交行为。

修复方案 #

方案一：利用HTML5原生校验+阻止默认行为

借助浏览器原生的表单校验能力，同时阻止默认提交：

<form id="myForm">
    <div class="form-item">
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" required>
    </div>
    <button type="submit" onclick="handleSubmit(event)">Submit</button>
</form>

对应的JavaScript：

function handleSubmit(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
    const form = document.getElementById('myForm');
    // 触发原生校验，通过后执行发送逻辑
    if (form.checkValidity()) {
        sendMail();
    } else {
        // 显示浏览器原生的必填提示
        form.reportValidity();
    }
}

function sendMail(){
    var params = {
        date: document.getElementById("date").value
    };

    const serviceID = "my_id";
    const templateID = "my_id";

    emailjs.send(serviceID, templateID, params).then((res) => {
        document.getElementById("date").value = ""; 
        console.log(res);
        alert("Done! Our Team will get back to you soon");
    })
    .catch((err) => console.log(err));
    
}

方案二：完善自定义校验并阻止默认行为

如果想用自定义提示，修改校验函数并阻止默认提交：

<form>
    <div class="form-item">
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" required>
    </div>
    <button type="submit" onclick="check(event)">Submit</button>
</form>

对应的JavaScript：

function check(event) {
    // 阻止表单默认提交
    event.preventDefault();
    var date = document.getElementById("date").value;
    if (!date) {
        alert("Please fill in all fields");
        return;
    } else {
        sendMail();
    }
}

function sendMail(){
    var params = {
        date: document.getElementById("date").value
    };

    const serviceID = "my_id";
    const templateID = "my_id";

    emailjs.send(serviceID, templateID, params).then((res) => {
        document.getElementById("date").value = ""; 
        console.log(res);
        alert("Done! Our Team will get back to you soon");
    })
    .catch((err) => console.log(err));
    
}

核心注意点 #

• 必须通过event.preventDefault()阻止按钮的默认提交行为，否则校验逻辑形同虚设。
• 原生校验checkValidity()+reportValidity()能快速实现符合浏览器体验的校验提示，无需重复编写判断逻辑。

内容的提问来源于stack exchange，提问作者Innocent Dengkhw Mochahari