如何在表单submit事件中触发两个验证函数并阻止非法提交

核心问题分析 #

1. 绑定按钮click事件无法阻止表单提交：按钮默认是submit类型，仅在click事件返回false无法可靠阻断表单的默认提交行为，必须监听表单的submit事件并明确阻止默认行为。
2. 绑定表单submit事件时validateHostEmail()未执行：原函数中冗余的each循环并非问题根源，而是事件绑定逻辑和验证状态重置的执行顺序需要调整，同时原验证条件存在逻辑漏洞。

修复后完整代码 #

JavaScript

$(document).ready(function() {
    $('#field-warning-message').hide();
    let empty_field_error = false;
    $('.verify-field').focusout(validateEmptyField);

    let resForm = $('.verify-form');
    let guestEmailInput = $('#guest-email');
    let emailErrorMessage = $('#email-error-message');
    let hostEmail = guestEmailInput.data('invalidity');

    function validateEmptyField() {
        $('.verify-field').each(function() {
            const value = $(this).val().trim();
            if (!value.length) {
                $('#field-warning-message').show().text("Please fill out required fields.");
                $(this).css('border-color', '#c65742');
                empty_field_error = true;
            } else {
                $('#field-warning-message').hide();
                $(this).css('border-color', '');
            }
        });
    }

    function validateHostEmail() {
        const emailValue = guestEmailInput.val().trim();
        if (emailValue === hostEmail) {
            emailErrorMessage.text('Cannot use your email.').addClass('red');
            empty_field_error = true;
        } else {
            emailErrorMessage.text('').removeClass('red');
        }
    }

    // 绑定表单submit事件，替代按钮click事件
    resForm.on('submit', function(e) {
        empty_field_error = false;
        validateHostEmail();
        validateEmptyField();

        if (empty_field_error) {
            e.preventDefault(); // 明确阻止表单提交
            return false;
        }
    });
});

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://www.google.com" id="reservation_form" class="verify-form">
  <div>
    <input type="text" name="first_name" placeholder="First Name" required class="verify-field">
    <input type="text" name="last_name" placeholder="Last Name" required class="verify-field">
    <input type="email" name="guest_email" id="guest-email" data-invalidity="data" placeholder="Email address" required class="verify-field validate-unique">
  </div>
  <div id="email-error-message"></div>
  <button id="submit_reservation_form" class="verify-form">
    Send Reservation
  </button>
</form>

关键修复点 #

• 改用表单submit事件：通过e.preventDefault()明确阻止默认提交行为，覆盖按钮点击、回车键触发等所有提交场景，可靠性更高。
• 修复非空验证逻辑：添加trim()处理空格输入，避免用户输入空格绕过验证；移除冗余的|| null条件，修正原逻辑漏洞。
• 简化邮箱验证函数：直接使用已获取的DOM元素引用，避免不必要的each循环，提升代码效率和可读性。
• 明确错误状态控制：每次提交前重置empty_field_error，确保两次验证函数的错误状态能正确累加，最终决定是否阻止提交。

测试方法 #

• 输入邮箱为data时，触发邮箱专属错误提示，表单不提交。
• 留空任意必填字段时，触发非空错误提示，表单不提交。
• 所有字段填写正确且邮箱不为data时，表单正常提交至目标地址。

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