表单验证函数isValidForms未触发，提交无提示求助

核心问题分析 #

• HTML结构损坏：reCAPTCHA对应的<div>标签未正确闭合，破坏了表单DOM结构，导致onsubmit事件无法正常绑定执行。
• reCAPTCHA回调冲突：原代码中data-callback="YourOnSubmitFn"若未正确实现，会直接触发表单提交，跳过自定义验证逻辑。
• JS执行时机错误：如果验证函数在DOM元素加载前运行，getElementById会返回null，导致函数内部报错中断，无法完成验证流程。

修复方案 #

1. 修复reCAPTCHA的HTML标签，确保完整闭合
2. 调整reCAPTCHA回调逻辑，使其依赖自定义验证结果
3. 确保JS代码在DOM加载完成后执行，避免元素未找到的错误
4. 优化验证函数内的DOM操作，添加存在性检查防止报错

修改后的完整代码 #

HTML部分 #

<div class="container">
    <form action="send_email.php" id="FormAccident" method="post" name="FormAccident" onsubmit="return isValidForms()">
        <input name="formAccident" type="hidden" value="true"/>
        <div class="container mt-5 border-bottom border-dark">
            <h4 class="text-uppercase mb-4">Données personnelles</h4>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Nom*</label>
                <div class="col-sm-3">
                    <input class="form-control" name="name" placeholder="Nom" type="text">
                </div>
                <div class="mt-2 errorColor" hidden id="nameErrorMsg">Format invalide</div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Prénom*</label>
                <div class="col-sm-3">
                    <input class="form-control" name="surname" placeholder="Prénom" type="text">
                </div>
                <div class="mt-2 errorColor" hidden id="surnameErrorMsg">Format invalide</div>
            </div>
            <!-- 修复reCAPTCHA标签，添加闭合标签 -->
            <div class="container mt-5 g-recaptcha" data-sitekey="xxxxxxxxxx" data-callback="onCaptchaSuccess"></div>
            <div class="container form-group row mt-5 mb-5">
                <div class="col-sm-10">
                    <!-- 移除多余form属性，按钮在表单内无需指定 -->
                    <button class="btn-lg btn-primary" type="submit" value="ENVOYER" id="submitBtn">ENVOYER</button>
                </div>
            </div>
        </div>   
    </form>
</div>

JS部分 #

// 等待DOM加载完成后执行脚本
document.addEventListener('DOMContentLoaded', function() {
    // 显示错误信息
    function showError(inputId, errorMsg) {
        const errorElement = document.getElementById(inputId + 'ErrorMsg');
        if (!errorElement) return;
        errorElement.textContent = errorMsg;
        errorElement.style.display = 'block';
        errorElement.hidden = false;
    }

    // 清除错误信息
    function clearError(inputId) {
        const errorElement = document.getElementById(inputId + 'ErrorMsg');
        if (!errorElement) return;
        errorElement.style.display = 'none';
        errorElement.hidden = true;
    }

    // 暴露验证函数到全局，确保onsubmit能调用
    window.isValidForms = function() {
        let isValid = true;
        const submitButton = document.getElementById('submitBtn');
        if (!submitButton) return false;

        // 获取必填字段值，添加默认值避免undefined报错
        const name = document.forms["FormAccident"]["name"].value || '';
        const surname = document.forms["FormAccident"]["surname"].value || '';

        // 验证姓名
        if (name.trim() === '') {
            showError('name', 'Veuillez remplir le champ "Nom"');
            isValid = false;
        } else {
            clearError('name');
        }

        // 验证姓氏
        if (surname.trim() === '') {
            showError('surname', 'Veuillez remplir le champ "Prénom"');
            isValid = false;
        } else {
            clearError('surname');
        }

        // 更新按钮状态
        submitButton.disabled = !isValid;

        // 弹窗提示未填字段
        if (!isValid) {
            const missingFields = [];
            if (!name.trim()) missingFields.push('Nom');
            if (!surname.trim()) missingFields.push('Prénom');
            alert(`Le formulaire comporte une erreur ou est incomplet pour les champs suivants : \n${missingFields.join('\n')}`);
            return false;
        }

        // 可选：添加reCAPTCHA验证检查
        // const captchaResponse = grecaptcha.getResponse();
        // if (!captchaResponse) {
        //     alert('Veuillez compléter le reCAPTCHA');
        //     return false;
        // }

        return true;
    };

    // reCAPTCHA回调函数，验证完成后启用提交按钮
    window.onCaptchaSuccess = function() {
        const submitButton = document.getElementById('submitBtn');
        if (submitButton) submitButton.disabled = false;
    };
});

额外优化点 #

• 给所有DOM操作添加存在性检查，避免因元素未找到导致函数中断
• 调整错误信息显示逻辑，同时操作hidden属性和display样式，提升兼容性
• 修复原代码中弹窗提示的字段文字颠倒问题
• 移除提交按钮多余的form属性，简化代码

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