Asp.net Core AJAX表单提交：客户端验证失效与FormData绑定为空问题

问题描述 #

1. 点击提交按钮时，客户端原生验证未触发，表单直接发起AJAX请求；
2. 控制器SendEmail方法中，SingleEmailMessage对象所有属性均为null，FormData的值无法绑定到模型。

问题1：客户端验证未触发修复 #

核心原因 #

• 提交按钮的onclick事件未正确触发原生表单验证，且event.preventDefault()的执行顺序错误，导致默认提交行为未被有效阻止；
• 未主动检查表单的有效性状态，跳过了原生验证流程。

修改方案 #

1. 将按钮的onclick绑定改为表单的onsubmit事件，确保验证逻辑在表单提交前触发；
2. 在SendEmail函数开头先检查表单有效性，若无效则触发原生验证提示并终止AJAX请求。

修改后的HTML表单关键部分

<form name="ajax-form" id="formPostComment" enctype="multipart/form-data" method="post" onsubmit="return SendEmail(event)">
    <!-- 其他表单内容保持不变 -->
    <div class="col-sm-12 contact-form-item">
        <input class="send_message btn btn-main btn-theme wow fadeInUp" type="submit" id="submit" name="submit" data-lang="en">
    </div>
    <!-- 其他提示内容保持不变 -->
</form>

修改后的JavaScript代码

function SendEmail(event) {
    event.preventDefault(); // 先阻止默认表单提交行为
    const form = document.getElementById('formPostComment');
    
    // 触发原生表单验证，若无效则显示提示并终止流程
    if (!form.checkValidity()) {
        form.reportValidity();
        return false;
    }

    // 后续AJAX请求逻辑...
}

问题2：模型绑定失败修复 #

核心原因 #

• 手动构建FormData时，Attachment字段传入的是DOM元素而非文件对象，服务器无法识别为IFormFile类型；
• 手动append字段容易出现键名或数据类型错误，不如直接用表单元素初始化FormData可靠。

修改方案 #

方案1：直接用表单元素初始化FormData（推荐）

自动收集所有表单字段（包括文件），无需手动拼接，避免数据类型错误：

function SendEmail(event) {
    event.preventDefault();
    const form = document.getElementById('formPostComment');
    
    if (!form.checkValidity()) {
        form.reportValidity();
        return false;
    }

    // 直接用表单元素构建FormData，自动包含所有字段
    var formData = new FormData(form);

    $.ajax({
        type: 'POST',
        url: "/Home/SendEmail",
        data: formData,
        processData: false,
        contentType: false,
        cache: false,
        success: function (response) {
            alert("Done");
            form.reset();
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
}

方案2：手动修正Attachment字段的取值

如果坚持手动append字段，需改为获取文件对象而非DOM元素：

// 手动append时的正确写法
formData.append("Attachment", $("#attachment")[0].files[0]);

控制器优化（可选）

移除多余的[Bind]特性（模型所有属性都需要绑定，Bind在此处无意义）：

[HttpPost]
public IActionResult SendEmail(SingleEmailMessage message)
{
    return Json(new { data = "DONE" });
}

完整代码示例 #

最终HTML表单 #

<form name="ajax-form" id="formPostComment" enctype="multipart/form-data" method="post" onsubmit="return SendEmail(event)">
    <div class="col-sm-6 contact-form-item wow zoomIn">
        <input name="Name" id="name" type="text" placeholder="Your Name: *" required/>
        <span class="error" id="err-name">please enter name</span>
    </div>
    <div class="col-sm-6 contact-form-item wow zoomIn">
        <input name="Email" id="email" type="email" placeholder="E-Mail: *" required/>
        <span class="error" id="err-email">please enter e-mail</span>
        <span class="error" id="err-emailvld">e-mail is not a valid format</span>
    </div>
    <div class="col-sm-6 contact-form-item wow zoomIn">
        <label for="attachment">Select file (If Any):</label>
        <input name="Attachment" id="attachment" type="file" />
    </div>
    <div class="col-sm-12 contact-form-item wow zoomIn">
        <textarea name="Message" id="message" placeholder="Your Message" required></textarea>
    </div>
    <div class="col-sm-12 contact-form-item">
        <input class="send_message btn btn-main btn-theme wow fadeInUp" type="submit" id="submit" name="submit" data-lang="en">
    </div>
    <div class="clear"></div>
    <div class="error text-align-center" id="err-form">There was a problem validating the form please check!</div>
    <div class="error text-align-center" id="err-timedout">The connection to the server timed out!</div>
    <div class="error" id="err-state"></div>
</form>

最终JavaScript #

function SendEmail(event) {
    event.preventDefault();
    const form = document.getElementById('formPostComment');
    
    if (!form.checkValidity()) {
        form.reportValidity();
        return false;
    }

    var formData = new FormData(form);

    $.ajax({
        type: 'POST',
        url: "/Home/SendEmail",
        data: formData,
        processData: false,
        contentType: false,
        cache: false,
        success: function (response) {
            alert("Done");
            form.reset();
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
}

控制器与模型 #

// 控制器方法
[HttpPost]
public IActionResult SendEmail(SingleEmailMessage message)
{
    return Json(new { data = "DONE" });
}

// 模型类
public class SingleEmailMessage
{
    public string Name { get; set; }
    public string Email { get; set; }
    public IFormFile Attachment { get; set; }
    public string Message { get; set; }
}

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