Salesforce Web-To-Lead表单提交时同步打开PDF并保留验证问题

需求 #

• 表单正常提交到Salesforce Web-To-Lead地址
• 验证通过后，在新窗口加载指定PDF文件
• 保留已实现的两项验证逻辑：验证码验证、复选框同意验证

现有验证代码（均正常工作） #

1. 验证码验证 #

var allow_submit = false

function captcha_filled () {
    allow_submit = true;
}
function captcha_expired () {
    allow_submit = false
}
function check_captcha_filled () {
    console.log('verify captcha')
    if (!allow_submit) {
        alert('ERROR: Please verify you are human by filling out the captcha')
        return false
    }
    captcha_expired()
    return true
}

2. 复选框同意验证 #

function fnSubmit() {
    if($("input:checkbox[id='chk']").is(":checked") == false){
        alert("You must agree to collect and use your personal information.");
        return false;
    }
    return true;
}

当前尝试的问题 #

通过内联onSubmit事件集成PDF下载时，存在逻辑和语法错误，无法同时满足验证和PDF打开需求，尝试代码如下：

<form action="web-to-lead" method="POST" onSubmit="return fnSubmit() & check_captcha_filled() & pdf_Download()">
<button class="def_btn bluest" name="submit">Contact</button>

<script>
function pdf_Download(e) {
    
    if($("input:checkbox[id='chk']").is(":checked") == false || !allow_submit == false) {
        e.preventDefault()
        return false
    } else {
        document.querySelectorAll('button.bluest').addEventListener("click").window.open('<?=$_REQUEST['bf_file']?>');
        return true
    }
}
</script>

解决方案 #

修正思路 #

1. 统一在表单submit事件中执行所有验证，验证通过后再触发PDF下载
2. 复用已有验证函数，避免重复逻辑
3. 修复事件绑定的语法错误

修正后的完整代码 #

HTML部分

<form action="web-to-lead" method="POST" id="webToLeadForm">
    <!-- 表单字段、验证码组件、复选框等原有内容 -->
    <input type="checkbox" id="chk">
    <button class="def_btn bluest" type="submit" name="submit">Contact</button>
</form>

JavaScript部分

var allow_submit = false

// 保留原有验证码相关函数
function captcha_filled () {
    allow_submit = true;
}
function captcha_expired () {
    allow_submit = false
}
function check_captcha_filled () {
    console.log('verify captcha')
    if (!allow_submit) {
        alert('ERROR: Please verify you are human by filling out the captcha')
        return false
    }
    captcha_expired()
    return true
}

// 保留原有复选框验证函数
function fnSubmit() {
    if($("input:checkbox[id='chk']").is(":checked") == false){
        alert("You must agree to collect and use your personal information.");
        return false;
    }
    return true;
}

// 表单提交事件处理
document.getElementById('webToLeadForm').addEventListener('submit', function(e) {
    // 执行所有验证
    const isCheckboxValid = fnSubmit();
    const isCaptchaValid = check_captcha_filled();
    
    // 验证失败则阻止表单提交
    if (!isCheckboxValid || !isCaptchaValid) {
        e.preventDefault();
        return;
    }
    
    // 验证通过后打开PDF
    window.open('<?=$_REQUEST['bf_file']?>', '_blank');
    
    // 不阻止默认行为，表单正常提交到Salesforce
});

关键修改点 #

• 用表单ID绑定submit事件，替代内联onSubmit，逻辑更清晰
• 先统一执行两项验证，全部通过才触发PDF下载并允许表单提交
• 修复原代码中addEventListener的语法错误
• 避免重复验证，直接复用已有函数的返回结果

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