HTML表单字段为空或格式不符时提交仍触发JS函数如何解决

你当前的问题核心是把提交逻辑绑定在了按钮的点击事件上，点击事件不受HTML5表单校验结果的影响，只要点击按钮就会执行。我们只需要调整事件绑定逻辑，配合HTML5原生校验规则即可实现需求，具体修改如下：

步骤1：修改HTML代码 #

首先给表单字段补充原生HTML5校验属性（你之前写的data-rule是自定义属性，原生校验不识别，需要补充对应的原生属性才能触发浏览器自带的校验提示），同时去掉按钮上的onclick绑定：

<form id="myForm" method="post" role="form" class="contactForm">                     
    <input 
        type="text" 
        name="name" 
        class="form-control" 
        id="name" 
        placeholder="Your Name"
        required
        minlength="4"
        data-msg="Please enter at least 4 chars" 
    />
                            
    <input 
        type="email" 
        class="form-control" 
        name="email" 
        id="email" 
        placeholder="Your Email"
        required
        data-msg="Please enter a valid email" 
    />
                            
    <textarea 
        class="form-control" 
        name="message" 
        id="message" 
        rows="5" 
        required
        data-msg="Please write something" 
        placeholder="Message"
    ></textarea>
                            
    <button 
        id="submitFormData" 
        type="submit" 
        class="button button-a button-big button-rouded"
    >Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="alert.js"></script>

步骤2：修改JavaScript代码 #

把提交逻辑绑定到表单的submit事件上，HTML5校验不通过时，浏览器会自动阻止submit事件触发，也就不会执行你的自定义逻辑，同时还会弹出默认的校验提示。另外记得阻止表单默认的提交跳转行为：

// 监听表单的submit事件，而不是按钮的click事件
$("#myForm").on("submit", function(e) {
    // 阻止表单默认的提交跳转
    e.preventDefault();
    
    // 下面是你原来的业务逻辑
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    alert("SHOW SOMETHING HERE");
});

如果你不想调整HTML的事件绑定，也可以通过主动调用校验方法的方式实现，直接修改原有JS逻辑即可：

function SubmitFormData() {
    // 调用表单checkValidity方法判断是否通过校验
    const form = document.getElementById("myForm");
    if (!form.checkValidity()) {
        // 校验不通过直接返回，不执行业务逻辑
        return;
    }
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    alert("SHOW SOMETHING HERE");
}

注意这个方案也需要给表单字段补充required、minlength等原生校验属性，否则checkValidity()无法识别你的校验规则。

内容的提问来源于stack exchange，提问作者Rahat Ahmed