Ajax表单提交成功回调触发html2pdf、空表单拦截实现求助

实现方案 #

1. 表单校验失败阻止提交 #

你现有的validateContact校验逻辑已经覆盖了空值、邮箱格式校验，只要补充两个细节即可完全实现阻止提交的逻辑：

• 若你是通过<form>标签的提交事件触发请求，需要阻止表单默认提交行为
• 修复原代码中AJAX参数的笔误：把$(content).val()改为$("#content").val()

2. 提交完成后调用html2pdf #

把现有html2pdf逻辑封装为独立函数，在AJAX请求的success回调中触发即可，如果你还需要保留原有的点击按钮下载PDF的功能，也可以同时保留按钮点击事件绑定。

修改后完整代码 #

// 表单提交函数
function sendContact(e) {
    // 若为form标签的submit事件触发，阻止默认表单跳转提交
    e && e.preventDefault();

    var valid = validateContact();
    if(valid) {
        jQuery.ajax({
            url: "contact_mail.php",
            data:'userName='+$("#userName").val()+'&userEmail='+$("#userEmail").val()+'&subject='+$("#subject").val()+'&content='+$("#content").val(),
            type: "POST",
            success:function(data){
                $("#mail-status").html(data);
                // 表单提交成功后触发PDF生成
                generatePDF();
            },
            error:function (){
                $("#mail-status").html("提交失败，请重试");
            }
        });
    }
}

// 原有表单校验逻辑无需改动
function validateContact() {
    var valid = true;   
    $(".demoInputBox").css('background-color','');
    $(".info").html('');

    if(!$("#userName").val()) {
        $("#userName-info").html("(required)");
        $("#userName").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#userEmail").val()) {
        $("#userEmail-info").html("(required)");
        $("#userEmail").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
        $("#userEmail-info").html("(invalid)");
        $("#userEmail").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#subject").val()) {
        $("#subject-info").html("(required)");
        $("#subject").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#content").val()) {
        $("#content-info").html("(required)");
        $("#content").css('background-color','#FFFFDF');
        valid = false;
    }

    return valid;
}

// 封装后的PDF生成函数
function generatePDF() {
    const invoice = document.getElementById("invoice");
    var opt = {
        margin: 0,
        filename: 'myfile.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 1 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().from(invoice).set(opt).save();
}

// 保留原有点击按钮下载PDF的功能（不需要可以删除这段）
document.getElementById("download").addEventListener("click", generatePDF);

事件绑定参考 #

• 按钮触发提交：

<button type="button" onclick="sendContact()">提交表单</button>

• form标签绑定提交：

<form onsubmit="sendContact(event)">
<!-- 表单输入项 -->
</form>

可选优化：如果需要确认服务端处理成功后再生成PDF，可让后端返回JSON格式的结果，前端判断状态后再触发PDF生成即可，避免提交失败也生成PDF的问题。

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