表单验证正常但提交后无提示框，需验证通过后弹出指定提示

你的问题核心出在事件绑定位置错误和函数调用方式不对，以下是修复步骤：

问题原因 #

• onsubmit是表单(<form>)的专属事件，不是按钮(<button>)的，你之前把它绑在按钮上根本不会触发
• 用onclick绑定按钮的话，点击就直接执行函数，不会等待浏览器的原生表单验证完成，所以会出现未填写就弹提示的情况

修复方案 #

1. 把onsubmit事件移到<form>标签上，调用函数时要加括号，同时用return控制表单提交流程
2. 修改提示内容为你需要的“提交已发送！”

修改后的完整代码 #

<form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="return A1()">
    <div class="s-12">
        <div class="margin">
            <div class="s-12 m-12 l-6">
                <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
                <p class="name-error form-error">Please enter your name.</p>
            </div>
            <div class="s-12 m-12 l-6">
                <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
                <p class="email-error form-error">Please enter your e-mail.</p>
            </div>
        </div>
    </div>
    <div class="s-12"> 
        <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
        <p class="subject-error form-error">Please enter the subject.</p>
    </div>
    <div class="s-12">
        <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
        <p class="message-error form-error">Please enter your message.</p>
    </div>
    <div class="s-12"><button class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
</form>

<script> 
function A1()
{
    alert("提交已发送！");
    return true;
}   
</script>

补充说明 #

• 浏览器会先执行原生表单验证，只有所有必填项都符合要求后，才会触发form的onsubmit事件，执行A1()函数
• return true会让表单继续提交到contact.php，如果只想弹提示不提交，可以改成return false

内容的提问来源于stack exchange，提问作者Saad Abbas